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>