Bootstrap DateTimePicker无法打开

Question

我正在使用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>

Answer 1

您的代码中有一些错误，应避免：

• 仅包含任何library 一次 ，您已将bootstrap-datetimepicker.min.js添加了2次。
• 您已经包含了datetimepicker库，然后应该按照文档的说明对其进行初始化 ，例如$('#divStartDate').datetimepicker(); 不作为datepicker() 。
• 使用maxDate ， endDate不是datetimepicker的有效选项。
• 请参阅format选项，您必须提供大写值，因为它引用了moment.js format选项， 请参见此处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>