Я использую два календаря на странице, даты начала и окончания, используя средство выбора даты Bootstrap.Как ни странно, он прекрасно работает при локальном запуске из Visual Studio 2017;но при развертывании щелчок текстового поля или значка не дает никакого эффекта.
Я проверил на наличие аналогичной проблемы в Интернете и перепробовал все предложения: использование имени класса вместо div id, проверка порядка включения js / css, ... но ничегопомогло.
Я проверил консоль разработчика на наличие ошибок и вижу: «EventLog.aspx: 353 Uncaught TypeError: $ (...). datepicker не является функцией» в следующей строке:
$('#divStartDate').datepicker({
Я прочитал, что это может быть вызвано, если есть несколько ссылок на jquery, и я не вижу его, если только один из других плагинов, которые я использую, также не использует его.
Это .NetПриложение и в мастер-файл у меня есть:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
На странице aspx с использованием календарей:
<div class="col-sm-2">
<div>
<label for="tbStartDate">Start Date</label>
<div id="divStartDate" class="input-group date startdate">
<input runat="server" clientidmode="static" type="text" id="tbStartDate" class="form-control" style="cursor: pointer">
<span class="input-group-addon" style="cursor: pointer">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="col-sm-2">
<div>
<label for="tbEndDate">End Date</label>
<div id="divEndDate" class="input-group date enddate">
<input runat="server" clientidmode="static" type="text" id="tbEndDate" class="form-control" style="cursor: pointer">
<span class="input-group-addon" style="cursor: pointer">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
....
<script>
$(document).ready(function ()
// I tried replacing #divStartDate with .input-group.date.startdate
$('#divStartDate').datepicker({
format: 'mm/dd/yyyy',
useCurrent: true,
autoClose: true,
allowInputToggle: true,
endDate: '+0d',
ignoreReadonly: true,
showTodayButton: true,
viewMode: 'days'
}).on('changeDate', function (e) {
$('#hfStartDate').val(e.format());
$(this).datepicker('hide');
});
$('#divEndDate').datepicker({
format: 'mm/dd/yyyy',
useCurrent: false,
autoClose: true,
allowInputToggle: true,
endDate: '+0d',
ignoreReadonly: true,
showTodayButton: true,
viewMode: 'days'
}).on('changeDate', function (e) {
$('#hfEndDate').val(e.format());
$(this).datepicker('hide');
});
});
</script>