2014-11-20 26 views
0

在我的webapp我使用引導組件;在我的一個頁面中,我試圖放置一個引導日期選擇器,或者更好的日期選擇器,但仍然沒有運氣。Bootstrap datepicker無法正常工作

我的CSS和JS進口(按順序):

  • bootstrap.css
  • datepicker.css
  • 的jquery.js
  • bootstrap.js
  • 引導,datepicker.js

我正在寫的代碼是:

<div class="container"> 
    <div class="row"> 
     <div class='col-sm-6'> 
      <div class="form-group"> 
       <div class='input-group date'> 
        <input data-format="dd/MM/yyyy hh:mm:ss" type='text' class="form-control" id='datetimepicker2' /> 
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
       $('#datetimepicker2').datetimepicker(); 
      }); 
     </script> 
    </div> 
</div> 

但我試了很多腳本的組合(避免文檔就緒函數調用,只是調用函數),在div和input上設置'datetimepicker2'id,總是沒有運氣。

當我嘗試我的日期選擇器沒有任何反應,並在控制檯中我總是得到:

遺漏的類型錯誤undefined是不就行了

錯誤的函數:

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

我在網上搜索,我不是唯一有這個問題的人,很多人解決在div類中放入'日期',但是沒有做tr舔我。其他人也建議導入jQueryUI,但仍然沒有運氣。任何提示?

+0

您加載'自舉datepicker.js'並試圖用'的DateTimePicker '。是嗎? – 2014-11-20 18:22:19

+0

看來你是缺少的moment.js ...工作小提琴:http://jsfiddle.net/0n2ok61a/ – Hackerman 2014-11-20 18:27:56

+0

這肯定是其中一個問題,就好像我把datepicker它像一個魅力,但如果我導入datetimepicker.js並嘗試調用datetimepicker它仍然不起作用。 @RobertRozas你是什麼意思由moment.js? – lateralus 2014-11-20 18:32:59

回答

2

這似乎是一個jQuery的衝突。重新啓動jquery版本並且需要jquery版本用於引導datepicker,或者您可能已經在html頁面中導入了兩個jquery版本。

+0

我知道我爲這個評論添加了一些內容,但答案並沒有幫助我們直接解決問題。 – 2015-04-24 06:58:35

0

<div class="container"> 
 
    <div class="row"> 
 
    <div class='col-sm-6'> 
 
     <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> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     $(function() { 
 
     $('#datetimepicker1').datetimepicker(); 
 
     }); 
 
    </script> 
 
    </div> 
 
</div>

以上片段是我們所需要的,但只有1更需要被添加的行。這就是腳本標籤。從上面複製div代碼並從下面複製腳本部分。

$.noConflict(); 
 
$(function() { 
 
    $('#datetimepicker1').datetimepicker(); 
 
});

我希望這清楚地回答你的問題....

代碼courtsey:http://eonasdan.github.io/bootstrap-datetimepicker/