Question

私はMVCとangularjsでWebアプリを作成しています、

、

コードではありません

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

が、アプリケーション

Uncaught TypeError: $(...).datetimepicker is not a function at HTMLDocument. (SelfAssignTask:325) at l (jquery2.0.3.min.js:4) at Object.fireWith [as resolveWith] (jquery2.0.3.min.js:4) at Function.ready (jquery2.0.3.min.js:4) at HTMLDocument.S (jquery2.0.3.min.js:4)

これらはメートルでスクリプトを実行している間、私はこのエラーを取得しています私は多くのスクリプト、または他に何を使用しているため、Yのレイアウトページ

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script> <!-- bootstrap-css --> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<!-- //bootstrap-css --> 
<!-- Custom CSS --> 
<link href="~/css/style.css" rel='stylesheet' type='text/css' /> 
<!-- font CSS --> 
@*<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>*@ 
<!-- font-awesome icons --> 
<link rel="stylesheet" href="~/css/font.css" type="text/css" /> 
<link href="~/css/font-awesome.css" rel="stylesheet"> 
<!-- //font-awesome icons --> 
<script src="~/js/jquery2.0.3.min.js"></script> 
<script src="~/js/modernizr.js"></script> 
<script src="~/js/jquery.cookie.js"></script> 
<script src="~/js/screenfull.js"></script> <!-- charts --> 
<script src="~/js/raphael-min.js"></script> 
<script src="~/js/morris.js"></script> 
<link rel="stylesheet" href="~/css/morris.css"> 
<!-- //charts --> 
<!--skycons-icons--> 
<script src="~/js/skycons.js"></script> 
<!--//skycons-icons--> 

エラーが来ていますか？

Answer 1

最初にbootstrap-datetimepicker.js（docsを読む）を含める必要がありますが、それにはmoment.jsが必要です。

しかし、既にanglejsを使用する予定がある場合は、ディレクティブを使用してウィジェットを初期化することを検討してください。その理由はangular wayです説明はplnkrをチェックしてください。

は、だからここに私達は行く：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" integrity="sha256-Gn7MUQono8LUxTfRA0WZzJgTua52Udm1Ifrk5421zkA=" crossorigin="anonymous"></script> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js" integrity="sha256-SS5UPPXAM4HWVoFCt0tsx90VWhRf7cStU5kabObE8cw=" crossorigin="anonymous"></script> 
 

 
<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"> 
 
      var initDatePicker = function() { 
 
       $('#datetimepicker1').datetimepicker(); 
 
      }; 
 
      window.onload = initDatePicker; 
 
     </script> 
 
    </div> 
 
</div>