Bootstrap DateTimePicker не является функцией

Я пытаюсь использовать DateTimePicker от http://eonasdan.github.io/bootstrap-datetimepicker/, и я получаю ошибку «Uncaught TypeError:. $ (...) DateTimePicker не является функцией»Bootstrap DateTimePicker не является функцией

Вот мои включает в себя:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>      
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

Вот код

<div class="container"> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker6'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker7'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $(function() { 
      $('#datetimepicker6').datetimepicker(); 
      $('#datetimepicker7').datetimepicker({ 
       useCurrent: false //Important! See issue #1075 
      }); 
      $("#datetimepicker6").on("dp.change", function (e) { 
       $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
      }); 
      $("#datetimepicker7").on("dp.change", function (e) { 
       $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
      }); 
     }); 
    }); 
</script>

Любая помощь будет принята с благодарностью.

источник

2015-10-21 unbootabru

Любые другие ошибки консоль JS? – Reeno

нет, это единственный – unbootabru

Работает для меня: https://jsfiddle.net/cfwat90p/ (это именно ваш код, включая отсутствующий «bootstrap.min.css», но отсутствующий CSS-файл не вызывает JS-error) – Reeno

Ниже правильный код. Включите JS файлы следующим образом:

<html> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 

<body> 



<div class="container"> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker6'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker7'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $(function() { 
      $('#datetimepicker6').datetimepicker(); 
      $('#datetimepicker7').datetimepicker({ 
       useCurrent: false //Important! See issue #1075 
      }); 
      $("#datetimepicker6").on("dp.change", function (e) { 
       $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
      }); 
      $("#datetimepicker7").on("dp.change", function (e) { 
       $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
      }); 
     }); 
    }); 
</script> 



</body> 


</html>

источник

2015-10-21 15:35:26 Suraj

Мне пришлось немного перемещать include/javascript, потому что это приложение для флэшей, но этот порядок работал. Спасибо – unbootabru

Счастливое кодирование @ user3784402 – Suraj

Проблема заключается в том, что вы не включили bootstrap.min.css, а также последовательность файлов может быть:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>      
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

DEMO

источник

2015-10-21 15:31:45

@ user3784402, убедитесь, что вы включили загрузочный файл css. –

Спасибо Это работает для меня после повторной последовательности –

Это сработало отлично !!! Благодарю. –

Попробуйте использовать Datepicker/timepicker вместо DateTimePicker как:

заменить:

$('#datetimepicker1').datetimepicker();

с:

$('#datetimepicker1').datepicker(); // or timepicker for time picker

источник

2018-01-01 19:35:26

Bootstrap DateTimePicker не является функцией

ответ

Смежные вопросы