$ (...) DatePicker не является функцией - JQuery - Bootstrap

Question

Я пытаюсь включить datepicker для Bootstrap, но я получаю следующее сообщение об ошибке:.

Uncaught TypeError: $(...).datepicker is not a function

Я не вижу почему он там. Я посмотрел на другие случаи этой ошибки, но никто не соответствует моим.

HTML:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
<script src="<?php echo BASE_URL; ?>/js/moment.min.js"></script> 
<script src="<?php echo BASE_URL; ?>/js/bootstrap.min.js"></script> 
<script src="<?php echo BASE_URL; ?>/js/bootstrap-datetimepicker.min.js"></script> 
<script src="<?php echo BASE_URL; ?>/js/main.js"></script> 

<div class="col-md-6"> 
    <div class="form-group"> 
     <label for="geboortedatum">Geboortedatum:</label> 
     <div class="input-group datepicker" data-provide="datepicker"> 
       <input type="text" name="geboortedatum" id="geboortedatum" class="form-control"> 
       <div class="input-group-addon"> 
        <span class="glyphicon glyphicon-th"></span> 
       </div> 
     </div> 
    </div> 
</div> 

JS:

$(document).ready(function() { 

    $('.datepicker').datepicker({ 
     format: 'dd/mm/yyyy' 
    }); 
}); 

UPDATE после добавления JQuery UI

Теперь выглядит следующим образом:

Answer 1

Не имя правильной функции Я думаю

$(document).ready(function() { 

    $('.datepicker').datetimepicker({ 
     format: 'dd/mm/yyyy' 
    }); 
}); 

Answer 2

Вам нужно включить jQueryUI

$(document).ready(function() { 
 

 
    $('.datepicker').datepicker({ 
 
     format: 'dd/mm/yyyy' 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js" integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE=" crossorigin="anonymous"></script> 
 
<script src="<?php echo BASE_URL; ?>/js/moment.min.js"></script> 
 
<script src="<?php echo BASE_URL; ?>/js/bootstrap.min.js"></script> 
 
<script src="<?php echo BASE_URL; ?>/js/bootstrap-datetimepicker.min.js"></script> 
 
<script src="<?php echo BASE_URL; ?>/js/main.js"></script> 
 

 
<div class="col-md-6"> 
 
    <div class="form-group"> 
 
     <label for="geboortedatum">Geboortedatum:</label> 
 
     <div class="input-group datepicker" data-provide="datepicker"> 
 
       <input type="text" name="geboortedatum" id="geboortedatum" class="form-control"> 
 
       <div class="input-group-addon"> 
 
        <span class="glyphicon glyphicon-th"></span> 
 
       </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

нужно включить JQuery-UI тоже:

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

Answer 4

У меня была аналогичная проблема. Быстрое решение я нашел это изменить:

<div class="input-group datepicker" data-provide="datepicker"> 

в

<div class="input-group date" data-provide="datepicker"> 

Answer 5

Чтобы избавиться от плохого глядя DatePicker вам нужно добавить JQuery-UI CSS

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"> 

Answer 6

<script type="text/javascript"> 

    var options={ 
      format: 'mm/dd/yyyy', 
      todayHighlight: true, 
      autoclose: true, 
     }; 

    $('#datetimepicker').datepicker(options); 

</script>