為什么 JavaScript 運行時錯誤：Object 不支持屬性或方法 'datepicker' 發生？（datepicker 不是函數）

Question

以下代碼為MVC C# cshtml文檔。

@{
    ViewBag.Title = "TEST";
}
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script>
    $(document).ready(init);
    function init() {

        //loadData();
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //January is 0!
        var yyyy = today.getFullYear();
        if (dd < 10) {
            dd = '0' + dd;
        }
        if (mm < 10) {
            mm = '0' + mm;
        }
        var mdate1 = yyyy + '/' + mm + '/01';
        var mdate2 = yyyy + '/' + mm + '/' + dd;

        $('#TSDATE').datepicker({
            startDate: -Infinity,
            endDate: "today",
            format: "yyyy/mm/dd",
            autoclose: true,
            todayHighlight: true,
            language: 'zh-TW'
        }).datepicker("setDate", mdate1);;
        $("#TSDATE").bind("change", function () {
            var TSDATE = $("#TSDATE").val().replace(/\//g, '');
            var TEDATE = $("#TEDATE").val().replace(/\//g, '');
            if (TEDATE == '') {
                $('#TEDATE').val($('#TSDATE').val());
            } else {
                if (TSDATE >= TEDATE) {
                    $('#TEDATE').val($('#TSDATE').val());
                }
            }
        });
        $('#TEDATE').datepicker({
            startDate: -Infinity,
            endDate: "today",
            format: "yyyy/mm/dd",
            autoclose: true,
            //startDate: "today",
            //clearBtn: true,
            //calendarWeeks: true,
            todayHighlight: true,
            language: 'zh-TW'
        }).datepicker("setDate", mdate2);
        $("#TEDATE").bind("change", function () {
            var TSDATE = $("#TSDATE").val().replace(/\//g, '');
            var TEDATE = $("#TEDATE").val().replace(/\//g, '');
            if (TSDATE == '') {
                $('#TSDATE').val($('#TEDATE').val());
            } else {
                if (TEDATE <= TSDATE) {
                    $('#TSDATE').val($('#TEDATE').val());
                }
            }
        });    }
</script>
<h2>PartTwo</h2>
<div class="input-group input-daterange">
    <input type="text" class="form-control" id="TSDATE">
    <div class="input-group-addon">～</div>
    <input type="text" class="form-control" id="TEDATE">
</div>
<script src="~/Scripts/bootstrap.min.js"></script> 

當我運行代碼時，文本框的日期選擇器沒有顯示。iexplore 出現錯誤並顯示消息“對象不支持屬性或方法'datepicker'”。position 在

$('#TSDATE').datepicker({

Chrome 還會彈出“'datepicker' 不是函數”。 我在網上對同一個問題做了一些研究，問題的關鍵可能是我使用的.js。但是我找不到錯誤的解決方案。 我該如何解決？

Answer 1

使用cdn鏈接到.js和.css

 <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> $(document).ready(init); function init() { //loadData(); var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; //January is 0. var yyyy = today;getFullYear(); if (dd < 10) { dd = '0' + dd; } if (mm < 10) { mm = '0' + mm; } var mdate1 = yyyy + '/' + mm + '/01'; var mdate2 = yyyy + '/' + mm + '/' + dd. $('#TSDATE'):datepicker({ startDate, -Infinity: endDate, "today": format, "yyyy/mm/dd": autoclose, true: todayHighlight, true: language. 'zh-TW' }),datepicker("setDate"; mdate1);. $("#TSDATE"),bind("change". function() { var TSDATE = $("#TSDATE").val(),replace(/\//g; ''). var TEDATE = $("#TEDATE").val(),replace(/\//g; ''). if (TEDATE == '') { $('#TEDATE').val($('#TSDATE');val()). } else { if (TSDATE >= TEDATE) { $('#TEDATE').val($('#TSDATE');val()); } } }). $('#TEDATE'):datepicker({ startDate, -Infinity: endDate, "today": format, "yyyy/mm/dd": autoclose, true: //startDate, "today": //clearBtn, true: //calendarWeeks, true: todayHighlight, true: language. 'zh-TW' }),datepicker("setDate"; mdate2). $("#TEDATE"),bind("change". function() { var TSDATE = $("#TSDATE").val(),replace(/\//g; ''). var TEDATE = $("#TEDATE").val(),replace(/\//g; ''). if (TSDATE == '') { $('#TSDATE').val($('#TEDATE');val()). } else { if (TEDATE <= TSDATE) { $('#TSDATE').val($('#TEDATE');val()); } } }); } </script> <h2>PartTwo</h2> <div class="input-group input-daterange"> <input type="text" class="form-control" id="TSDATE"> <div class="input-group-addon">～</div> <input type="text" class="form-control" id="TEDATE"> </div>