0

我想安裝此的DateTimePicker自舉: https://github.com/Eonasdan/bootstrap-datetimepicker/wiki/InstallationjQuery函數不加載 - 不確定是不是一個函數

我已經在我的文檔的頁眉得到這個:

<script src="/js/jquery-1.11.1.min.js"></script> 
    <script src="/js/moment.min.js"></script> 

這在頁腳:

<script src="/js/bootstrap.min.js"></script> 
    <script src="/js/bootstrap-datetimepicker.min.js"></script> 

這裏是使用選擇器的代碼:

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

      <script type="text/javascript"> 
       $(function() { 
        $('#datetimepicker').datetimepicker(); 
       }); 
      </script> 

問題是.datetimepicker是一個「未解析函數」。爲什麼?

編輯:

的IDE(PHPStorm)說,這是懸而未決的功能。而實際上在Chrome中運行它確認:

bootstrap-datetimepicker.min.js:1 Uncaught TypeError: undefined is not a function 
    myfile.php:42 Uncaught TypeError: undefined is not a function 
    bootstrap-datetimepicker.min.js:1 Uncaught Error: Must choose at least one picker 

Edit2:我更新了頁眉/頁腳。 標題:

頁腳:

<script src="/js/bootstrap.min.js"></script> 
<script src="/js/moment.min.js"></script> 
<script src="/js/bootstrap-datetimepicker.min.js"></script> 
<script src="/js/bootstrap-rowlink.js"></script> 
<script src="/js/myscripts.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#datetimepicker').datetimepicker(); 
    }); 
</script> 

現在IDE識別的DateTimePicker()的函數,但仍然在Chrome同樣的問題! (見上文)

+0

你能否告訴我完整的源代碼?我認爲你的錯誤不會發生在瀏覽器中。 – ray 2014-12-09 13:13:59

+0

檢查螢火蟲,看是否正確加載js文件 – Mivaweb 2014-12-09 13:16:00

+0

完整的源代碼有點「敏感」,但我會嘗試刪除敏感內容並稍後發佈源代碼。 – JamesB 2014-12-09 13:19:32

回答

1

嘗試只包括jQuery的在標題:

<link rel="stylesheet" type="text/css" media="screen" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css" /> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"> 
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script> 

這些在頁腳:

<script type="text/javascript" src="scripts/bootstrap.min.js"></script> 
<script type="text/javascript" src="scripts/moment.js"></script> 
<script type="text/javascript" src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/src/js/bootstrap-datetimepicker.js"></script> 

作者使用jQuery 2.1.1,因此他的插件可能是relian在那個版本上。

編輯

我無法得到它的工作,無論是。但是,自從Moment.js更新至2.8.4版本以來,在其Github頁面上創建了一些問題。試試Smalot's Bootstrap Datepicker。它也很好的維護,它適用於我。

+0

我試着將jquery 2.1.1添加到頁眉,並將其餘的頁面移動到頁腳。請參閱我的文章的edit2。仍然不工作! – JamesB 2014-12-09 13:36:20

+0

@JamesB看到我的編輯,可能是插件不能很好地與momentjs一起播放(我敢肯定它只是暫時的,因爲github頁面列出了最近的變化),我不知道它什麼時候會修復,我推薦了一個不錯的日期選擇器 – mijopabe 2014-12-09 15:00:52

+0

The你連接的一個是完美的!挑選時間對我來說很重要,並且時間選擇看起來非常棒。謝謝! 我不會再去排查故障了,只是假設你是對的它實際上是時刻或腳本本身的問題。我之前實施了一個不同的時間選擇器,沒有任何問題。 – JamesB 2014-12-09 18:01:43

1

我認爲你是太早調用$('#datetimepicker').datetimepicker();,你應該組織你這樣的代碼:

<script src="/js/bootstrap.min.js"></script> 
<script src="/js/bootstrap-datetimepicker.min.js"></script> 
<script type="text/javascript"> 
       $(function() { 
        $('#datetimepicker').datetimepicker(); 
       }); 
</script> 
+0

這實際上是問題,你會像我以前面臨的類似問題。 – asimshahiddIT 2014-12-09 13:26:41

+0

我試圖把它添加到最後,但它沒有幫助:( – JamesB 2014-12-09 13:35:12

+0

問題不在於調用'$('#datetimepicker')。datetimepicker();'但是在插件聲明中,嘗試使用非縮小版本的bootstrap-datetimepicker.js並更新(再次)你的問題 – n00dl3 2014-12-09 13:42:45

0

嘗試調用文檔準備

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#datetimepicker').datetimepicker(); 
    }); 
</script> 
+0

將函數直接傳遞給jQuery函數(即'$(function(){...})')是文檔就緒處理程序的縮寫,因此它們已經執行了代碼。 – 2014-12-09 13:28:01

0

檢查例如從作者site

您使用的是錯誤的功能,你需要引用封閉DIV,而不是你的輸入元素。

你的HTML應該是這樣的:

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

相關問題