Bootstrap 3 Datepicker не показывает календарь

Я включил следующие в моей странице:Bootstrap 3 Datepicker не показывает календарь

В <head>

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

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
<![endif]--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

<!-- Latest compiled and minified jQuery Core --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Низ <body>

<!-- Moments.js minified CDN --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> 

<!-- Bootstrap datepicker --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>

Тогда я использовал JQuery для введите поле ввода моей формы в значение datepicker:

<div class="form-group"> 
    <div class='input-group date' id='datetimepicker1'> 
     <input type='text' class="form-control" /> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(function() { 
     $('#datetimepicker1').datetimepicker(); 
    }); 
</script>

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

Я перечитал учебник Installation, но я ничего не вижу.

источник

2015-06-11 BaddieProgrammer

Загрузка jquery.min.js Перед bootstrap.min.js –

Заменить

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

По

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

Вы должны получить TypeError: $(...).datetimepicker is not a function в консоли браузера.

Потому что вы включили только дату, а не datetimepicker.

Live Demo

источник

2015-06-11 13:33:57

также должен был добавить CSS для datetime-picker, o по часовой стрелке календарь выглядит как мусор. – BaddieProgrammer

если вы открыли консоль браузера, вы бы увидели ошибку исключения в консоли, как bootstrap JS requires jquery или так

<!-- Latest compiled and minified jQuery Core --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>

это должно работать

источник

2015-06-11 13:30:57 adelowo

Добавить DateTimePicker1 Для <input type='text' class="form-control" id="datetimepicker1" />

и $('#datetimepicker1').datepicker(); не $('#datetimepicker1').datetimepicker();

Wokring здесь:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <!-- Optional theme --> 
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">--> 
</head> 
<body> 


<div class="form-group"> 
    <div class='input-group date' > 
     <input type='text' class="form-control" id="datetimepicker1" /> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
    </div> 
</div> 



<!-- Latest compiled and minified jQuery Core --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#datetimepicker1').datepicker(); 
    }); 
</script> 
</body> 
</html>

источник

2015-06-11 13:52:05 Gintoki

Bootstrap 3 Datepicker не показывает календарь

ответ

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