时间戳

首页 > 解决方案 > 引导日期时间选择器未打开

javascript - 引导日期时间选择器未打开

问题描述

我在页面上使用两个日历，开始日期和结束日期，使用 Bootstrap 日期时间选择器。奇怪的是，在 Visual Studio 2017 中本地运行时，它运行良好；但部署时单击文本框或图标无效。

我在网上检查了类似的问题并尝试了所有建议：使用类名而不是 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>

标签： javascriptjqueryasp.net.net-4.5bootstrap-datetimepicker

解决方案

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

  • 仅包含library 一次，您已添加了bootstrap-datetimepicker.min.js2 次。
  • 您已经包含了datetimepicker库，那么您应该根据文档 对其进行初始化，例如$('#divStartDate').datetimepicker();不是datepicker().
  • 使用maxDate,endDate不是datetimepicker的有效选项。
  • 查看format选项，您必须提供大写值，因为它指的是moment.js格式选项，请参阅此处的选项。

现在解决方案如下：

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

推荐阅读