无法读取未定义/未捕获的TypeError属性'fn':$ {...)。daterangepicker不是函数

时间:2019-04-16 10:24:11

标签: javascript jquery datepicker

我试图在我的网页上显示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
    });
  };

您的所有回复将受到高度赞赏

1 个答案:

答案 0 :(得分:0)

原因是库datepicker未正确初始化。添加使用jQuery的库时,需要在jQuery之后添加库。

代码应类似于

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