質問

スタックオーバーフローでいくつかの答えを見つけましたが、まだ私の問題を解決することができません。 私はDjangoで動作していますが、このエラーには関係ないと思います。

日付ピッカーのJavaスクリプトを動作させようとしましたが、エラーが発生しました。

1:27 Uncaught TypeError: $(...).datepicker is not a function(anonymous function) @ 1:27fire @ jquery-1.9.1.js:1037self.fireWith @ jquery-1.9.1.js:1148jQuery.extend.ready @ jquery-1.9.1.js:433completed @ jquery-1.9.1.js:103 jquery-2.1.0.min.js:4 XHRの読み込みが終了しました。POST " https://localhost:26143/skypectoc/v1/pnr/parse ".l.cors.a.crossDomain.send @ jquery-2.1.0.min.js:4o.extend.ajax @ jquery-2.1.0.min.js:4PNR.findNumbers @ pnr.js:43parseContent @ contentscript.js:385processMutatedElements @ contentscript.js:322

これが私のスクリプトのすべてです。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
 <script type="text/javascript">
              $(document).ready(function() {
                  $("#extra-content").hide();
                  $("#toggle-content").click(function(){
                      $("#extra-content").toggle();
                  });
              });
 </script>            

ご意見・ご感想をお待ちしております。

解決方法は？

何が問題だったのでしょうか？

最初にjQueryをインクルードするとき。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

2つ目のスクリプトは、jQueryにプラグインして、quot;add" $(...).datepicker .

でも、そうすると、またjQueryを入れることになりますよね。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

差し入れを元に戻すので $(...).datepicker は未定義になります。

最初の $(document).ready ブロックはその前に現れますが、匿名コールバック関数本体はすべてのスクリプトがロードされるまで実行されず、その時点では $(...) ( window.$ は、最近読み込まれたjQueryを指しています。

を呼び出すと、このような事態には陥らない。 $('.dateinput').datepicker の中ではなく、すぐに $(document).ready のコールバックが必要ですが、その場合、ターゲット要素 (クラス dateinput ) がスクリプトの前にすでにドキュメント内にあり、一般に、スクリプトの前に ready コールバックを使用します。

解決方法

を使用したい場合 datepicker を jquery-ui から取得する場合、おそらく jquery-ui スクリプトを含めることが最も理にかなっています。 後 jquery-ui 1.11.4はjquery 1.6+と互換性があるので、問題なく動作すると思います。

または（特にjquery-uiを他に使っていない場合）、次のようにすることもできます。 ブートストラップ・デートピッカー .