2013-12-04 3 views
1

Так это Разметка DatePicker:Datepicker не показывает - Bootstrap

 <div class="form-group row"> 
     <div class="col-xs-3 col-md-offset-9"> 
      <label class="control-label">Pick Date</label> 
      <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy"> 
      <input class="form-control" type="text" readonly="" value="12-02-2012"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
      </div> 
     </div> 
     </div> 

На самом деле, это выглядит следующим образом:

enter image description here

Однако, когда я нажимаю на значок календаря есть нет показ таблицы-вида-подобной даты. Я включил следующий CSS и JS:

<link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/datepicker.css" rel="stylesheet"> 
    <script type="text/javascript"src="js/jquery-2.0.3.js"></script> 
    <script type="text/javascript"src="js/bootstrap.js"></script> 
    <script type="text/javascript"src="js/bootstrap-datepicker.js"></script> 

Я также назвал функцию в <head></head> и в конце <body></body> просто чтобы убедиться. Но, когда я нажимаю кнопку, все равно не реагирую.

<script type="text/javascript"> 
     $(document).ready(function() { 
     $("#dp3").datepicker({ autoclose: true, todayHighlight: true }); 
}); 

     $(window).on('load',function(){ 
     $("#dp3").datepicker({ autoclose: true, todayHighlight: true }); 
}); 

    </script> 

Я изменил некоторые CSS JS кода из-за Bootstrap 3 обновленный код, источник: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/

Таким образом, я хочу иметь таблицы Двойник как DatePicker, когда я нажимаю кнопка календаря. Любая помощь? Благодарю.

+0

Я просто реализовал исправление от kenyontechnology.com себя, и она отлично работает. Все ли ваши файлы включены? Есть ли какие-либо ошибки в консоли? – Blazemonger

+0

Возможно, проблема в том, что вы вызываете '$ ('# dp3'). Datepicker()' дважды. – Blazemonger

+0

@Blazemonger Я пробовал и, наконец, нашел проблему. Проблема в том, что я включил jquery.js, которые могут мешать jquery-2.0.3.js. После того как я удалил jquery.js, вуаля работает. Спасибо за помощь bro – noobprogrammer

ответ

3

Я столкнулся с аналогичной проблемой - в моем случае в проводке jQuery $ ('# someid'). Datepicker() 'someid' был идентификатором «ввода» и где должен был быть контейнер div , что означает - он работал, когда вы нажимаете поле ввода, но не кнопку глификона.

У меня есть рабочая копия скрипку здесь: jsfiddle

jsfiddle код здесь: (Примечание: ссылка на JQuery 2.0.2, а также закладка внешних reosurces в редакторе jsFiddle)

http://jsfiddle.net/Lro8kxjx/6/ 

<div class="col-xs-6 "> 
<div class="form-group "> 
    <div class='input-group date' id='datepicker'> 
     <input type="text" id="processdate" class="form-control" placeholder="Processing Date..." name="processdate" /> <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span> 
    </div> 
</div> 

$(document).ready(function() { 
$('#datepicker').datepicker({ 
    startDate: '-180d', 
    endDate: '+1d', 
    autoclose: true 
}); }); 
+0

Примечание: рабочий код jsFiddle находится здесь: http://jsfiddle.net/Lro8kxjx/6/ – JustE

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