У меня есть эта ошибка в консоли: $ (…) .datepicker не является функцией

Question

Я новичок в html с js. Я пытаюсь использовать средство выбора даты, но оно не работает.

У меня есть эта ошибка: $ (...). Datepicker нет функция в консоли

Я использую много фреймворков и библиотек (bootstrap, datapicker). И я думаю, что между ними есть конфликты. Пожалуйста, дайте мне совет в коде.

js страница:

     $(document).ready(function() {
         // dateevent
          $(".datepicker").datepicker({ 
                autoclose: true, 
                todayHighlight: true
          }).datepicker('update', new Date());


         // time of event
          $('.datefrom').datetimepicker({
                format: 'LT'
             });


             $('.dateto').datetimepicker({
                 format: 'LT'
             });

            //geteventbyid
             if (sessionStorage.getItem('editeventid')!=0) {
                 geteventbyid();
            }
         });

     //time
     </script>

Библиотеки Я использование и их размещение:

 <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>         
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

html Страница:

<!-- Start Main -->
<section id="main">  
    <div id="page">

        <div class="row-container light bg-scroll" style="">


        <div class="row">  
        <form method="post">   
    <div class="col-sm-4"></div>
    <div class="form-group">
    <div class='col-sm-4'>
    <label>Select Date: </label>
    <input class="form-control datepicker" type="text" id="eventdate" style="width: 220px" />
    </div>
    </div>
     </form>
     <div class="col-sm-4"></div>
     </div>
      </div>

Answer 1

Лучше добавить jquery.js плагин в верхней части скрипта. Потому что bootstrap также нужна jquery поддержка

$(document).ready(function() {
  // dateevent
  $(".datepicker").datepicker({
    autoclose: true,
    todayHighlight: true
  }).datepicker('update', new Date());


  // time of event
  $('.datefrom').datetimepicker({
    format: 'LT'
  });


  $('.dateto').datetimepicker({
    format: 'LT'
  });

  //geteventbyid
 // if (sessionStorage.getItem('editeventid') != 0) {
   // geteventbyid();
  //}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> html page :

<!-- Start Main -->
<section id="main">
  <div id="page">

    <div class="row-container light bg-scroll" style="">


      <div class="row">
        <form method="post">
          <div class="col-sm-4"></div>
          <div class="form-group">
            <div class='col-sm-4'>
              <label>Select Date: </label>
              <input class="form-control datepicker" type="text" id="eventdate" style="width: 220px" />
            </div>
          </div>
        </form>
        <div class="col-sm-4"></div>
      </div>
    </div>