Javascript - Uncaught ReferenceError: $ не определено

Я пытаюсь использовать выборку диапазона дат на JavaScript в Django, где у меня есть поле даты из модели django. Я хочу переопределить использование выборки диапазона дат, но получаю ошибку. Хотя я добавил jquery cdn также.

cdn:

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
  integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"> </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
  integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<!--datepicker  -->

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

</head>

error

 jquery-3.6.0.min.js:2 jQuery.Deferred exception: $(...).daterangepicker is not a function TypeError: $(...).daterangepicker is not a function
    at HTMLDocument.<anonymous> (http://localhost:1700/:646:34)
    at e (https://code.jquery.com/jquery-3.6.0.min.js:2:30038)
    at t (https://code.jquery.com/jquery-3.6.0.min.js:2:30340) undefined
S.Deferred.exceptionHook @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
fire @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
ready @ jquery-3.6.0.min.js:2
B @ jquery-3.6.0.min.js:2
jquery-3.6.0.min.js:2 Uncaught TypeError: $(...).daterangepicker is not a function
    at HTMLDocument.<anonymous> ((index):646)
    at e (jquery-3.6.0.min.js:2)
    at t (jquery-3.6.0.min.js:2)

html

  <div> Due Date</div>
                <div class="row" id='id_row' name="daterange">
                  <!-- From: <input type="date" name='fromdate'>
                  To: <input type="date" name='todate'> -->
                   {{ form.due_Date}} 
                </div>
                <p></p>


  <script>
  $(function() {
    $('input[name="daterange"]').daterangepicker({
      opens: 'left'
    }, function(start, end, label) {
      console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
    });
  });
  </script>
Вернуться на верх