Bootstrap 日期时间选择器打不开

Question

我在页面上使用两个日历，开始日期和结束日期，使用 Bootstrap 日期时间选择器。奇怪的是，在 Visual Studio 2017 内本地运行时它工作正常；但部署后点击文本框或图标没有效果。

我在网上检查了类似的问题并尝试了所有建议：使用 class 名称而不是 div id，检查 js/css 的顺序包括，...但没有任何帮助。

我检查了开发人员控制台是否有错误，并在以下行看到："EventLog.aspx:353 Uncaught TypeError: $(...).datepicker is not a function"：

$('#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>

Answer 1

您的代码中存在一些您应该避免的错误：

包含任何 library 仅一次，您已添加 bootstrap-datetimepicker.min.js 2 次。
您已经包含 datetimepicker 库，然后您 应该按照 documentation 初始化它，例如$('#divStartDate').datetimepicker(); 不像 datepicker().
使用 maxDate，endDate 不是 datetimepicker 的有效选项。
参见 format option, you have to give capital values because it refers to moment.js format option see here for options。

现在解决方案如下：

$(document).ready(function () {
        $('#divStartDate').datetimepicker({
            format: 'DD/MM/YYYY',
            useCurrent: true,
            keepOpen: true,
            allowInputToggle: true,
            maxDate: new Date(),
            ignoreReadonly: true,
            showTodayButton: true,
            viewMode: 'days'
        });

        $('#divEndDate').datetimepicker({
            format: 'DD/MM/YYYY',
            useCurrent: false,
            keepOpen: true,
            allowInputToggle: true,
            maxDate: new Date(),
            ignoreReadonly: true,
            showTodayButton: true,
            viewMode: 'days'
        });
});

<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>


<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<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" data-date-end-date="0d" 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" data-date-end-date="0d" 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>

Bootstrap 日期时间选择器打不开

Bootstrap datetimepicker does not open

javascript

asp.net

jquery

.net-4.5

bootstrap-datetimepicker