Why does JavaScript runtime error: Object doesn't support property or method 'datepicker' happen?(datepicker is not a function)

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>

当我运行代码时，文本框的日期选择器不是 showing.The iexplore 出现错误并显示消息“对象不支持属性或方法 'datepicker'".位置在

$('#TSDATE').datepicker({

Chrome也弹出“'datepicker'不是函数”。我在网上对同一个问题做了一些研究，问题的关键可能是 .js 我 use.But 我找不到错误的解决方案。我该如何解决？

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>

Why does JavaScript runtime error: Object doesn't support property or method 'datepicker' happen?(datepicker is not a function)

Why does JavaScript runtime error: Object doesn't support property or method 'datepicker' happen?(datepicker is not a function)

javascript

c#

jquery

datepicker

bootstrap-4