無法讀取未定義/未捕獲類型錯誤的屬性“fn”：$(...).daterangepicker 不是函數

Question

我試圖在我的網頁上顯示 jquery datepicker，但它給出了 2 個錯誤：

1. Uncaught TypeError: Cannot read property 'fn' of undefined
2. Uncaught TypeError: $(...).daterangepicker is not a function

看起來我錯過了什么

我正在使用 jquery 3.3.1.min.js 和 datepicker.js

這是 html 和 head 中的代碼

<link rel="stylesheet" type="text/css" href="{{ url('') }}/assets/header_css/bootstrap.css" />
<script type="text/javascript" src="{{ url('') }}/assets/header_js/daterangepicker.js"></script>

這是輸入類型的代碼

<input type="text" value ="YYYY/MM/DD" class="form-control datepicker" v-model="tanggalpickup"  name="tanggalpickup" id="tanggalpickup"/>

這是javascript的代碼

$(document).ready(function() {
    $("input.datepicker").singleDatePicker();
  });

  $.fn.singleDatePicker = function() {
    $(this).on("apply.daterangepicker", function(e, picker) {
      picker.element.val(picker.startDate.format(picker.locale.format));
    });
    return $(this).daterangepicker({
      locale: {
        format: 'YYYY-MM-DD' // Change to local formats YYYY-MM-DD - MM-DD-YYYY
      },
      singleDatePicker: true,
      autoUpdateInput: false
    });
  };

您的所有回復將不勝感激

Answer 1

原因是庫datepicker未正確初始化。 當您添加使用jQuery庫時，您需要在jQuery之后添加這些庫。

代碼應該是這樣的

<script src='yourpath/jquery.min.js'></script>
<script src='yourpath/daterangepicker.js'></script>