2015-10-07 64 views
1

我有一個問題,當我嘗試設置與日期時間選擇器格式。調試器告訴我,requirejs和自舉的DateTimePicker

Uncaught TypeError: $(...).datetimepicker is not a function 

的HTML是:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

    <meta charset="utf-8" /> 
    <title>Web Project</title> 

    <link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <link href="Styles/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" /> 
    <link href="Styles/simple-sidebar.css" rel="stylesheet" type="text/css" /> 

    <script data-main="Scripts/app.js" src="Scripts/Libs/require.js"></script> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

</head> 
<body> 


    <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> 
     </div> 
    </div> 
</div> 

</body> 
</html> 

主HTML設置並加載requirejs本身加載我app.js.在那裏,我會嘗試在文檔準備就緒時設置日期選擇器格式。請看下面。

requirejs.config({ 

    // by default load any module IDs from Scripts/libs 
    baseUrl: 'Scripts/Libs', 

    paths: { 
     models: '../models', 
     collections: '../collections', 
     views: '../views', 
     routers: '../routers', 
     components: '../components', 
     modelDialog: 'backbone.ModalDialog', 
     bootstrap: 'bootstrap.min', 
     boostrapDatePicker: 'bootstrap-datetimepicker.min', 
    }, 

    shim: { 
     'backbone': { 
      deps: ['underscore', 'jquery'], 
      exports: 'Backbone' 
     }, 
     'underscore': { 
      exports: '_' 
     }, 
     'bootstrap': { 
      deps: ['jquery'] 
     }, 
     'boostrapDatePicker': { 
      deps: ['moment', 'jquery', 'bootstrap'] 
     } 

    } 

}); 

var app = app || {}; 

require(['components/dataService'], function(dataService) { 

    $("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
    }); 

    $(document).ready(function() { 

     $('#datetimepicker1').datetimepicker({ format:'MM/DD/YYYY'}); 

     dataService.getData(); 

    }); 

}); 

回答

3

你需要 'jQuery的' 和 'boostrapDatePicker' 添加到您的要求數組:

require(['components/dataService', 'jquery', 'boostrapDatePicker'], function(dataService, $) { 
    ... 
-2

我認爲這個問題可能是你所得到

遺漏的類型錯誤:$(。 ..)的DateTimePicker不是一個函數

返回,因爲是的DateTimePicker可能沒有獲得進口/加載正確或者你可能會丟失一個扶養。

+2

這個答案是多餘的,看到[接受的答案](http://stackoverflow.com/a/32983774/1906307),它被張貼之前你幾個月,*已經*演示了在你的答案假設什麼。 – Louis