Как использовать контроль даты и времени Bootstrap

Question

Мне нужно использовать управление выбором даты и времени в моем приложении MVC 4. Для этого я установил bootstrap 3-datetimepicker пакет nuget и ниже указаны связанные файлы.

<link href="Content/bootstrap.min.css" rel="stylesheet" />  
<link href="Content/bootstrap-datetimepicker.css" rel="stylesheet" /> 
<!--renamed - .less file to .css and referred here !> 
<script src="Scripts/jquery-1.9.1.min.js"></script> 
<script src="Scripts/bootstrap.js"></script>  
<script src="Scripts/bootstrap-datetimepicker.min.js"></script> 

Html код:

 <div class="container"> 
     <div class="row"> 
     <input type="text" id="dpicker" class="form-control" /> 
     </div> 
    </div> 

JS код:

$(function() { 
    $("#dpicker").datetimepicker({ format: 'mm-dd-yyyy' }); 
}); 

Хотя, по щелчку текстового поля нет выбора даты открыт.

В чем проблема в приведенном выше коде, чтобы использовать управление выбора времени бутстрапа?

Благодаря

Answer 1

Добавить date класс input первого родителя, то есть: <div class='row date'>.

Тогда это сработает.

Здесь работает сниппет

$(function(){ 
 
$('#dpicker').datepicker({ 
 
    format: 'mm-dd-yyyy' 
 
}); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
 

 
<div class="container"> 
 
     <div class="row date"> 
 
     <input type="text" id="dpicker" class="form-control" /> 
 
     </div> 
 
    </div>