Datapickerを使うことができません。。

Question

いつもお世話になっています。
Bootstrapを使って、WEBサイト制作を行っているのですが
Datapickerをいれても反応しなくて困っています。
https://eonasdan.github.io/bootstrap-datetimepicker/

ここに書いているように記載はしたのですが、CSSは綺麗に表示されているのですが。
押しても反応は全くありません。

出てくるエラーは下記です。

m.fn.init[1]
payment.html:36 Uncaught TypeError: $(...).datetimepicker is not a function

stylesheetやjavascriptはきちんろ読み込まれているはずなのですが...

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript"></script>
    <script src="./js/bootstrap-datepicker.js" type="text/javascript"></script>

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

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

Answer 1

<script src="./js/bootstrap-datepicker.js" type="text/javascript"></script>

特にファイル名に変更を加えていなければ
bootstrap-datepicker.js ではなく
bootstrap-datetimepicker.js なのでは。

https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.js

Comments

[yamady]

さっそくのご回答いただきまして、まことにありがとうございます。
ファイル名を変更して実行したのですが、まず作成しているjsフォルダに入っていたファイル名が間違ってはいなかったのですが、改めて名称を変更して行いましたが、結果できずでした。。

いただいたURLをコピーして、これをファイルに貼り付けて行うと、下記のエラーとなってしまいました。

Uncaught bootstrap-datetimepicker requires Moment.js to be loaded first(anonymous function) @ bootstrap-datetimepicker.js:49(anonymous function) @ bootstrap-datetimepicker.js:53
payment.html:34 Uncaught TypeError: $(...).datetimepicker is not a function(anonymous function) @ payment.html:34j @ jquery.js:3148k.fireWith @ jquery.js:3260m.extend.ready @ jquery.js:3472J @ jquery.js:3503

なんども申し訳ございません。。

[nnssn]

変更後はエラーメッセージdatetimepicker is not a functionが消えているので
やはり最初はファイルが読み込めてなかったみたいです。

新しいエラーメッセージは「先にMoment.jsを読み込め」って言ってるので（たぶん）
ぐぐったらstackoverflowのトピックに回答がありました。
Moment.jsが前提ライブラリに含まれていて、
かつこの順番で読み込まないといけないようです。

http://stackoverflow.com/questions/21459730/error-with-bootstrap-3-date-time-picker

date-picker系のライブラリは名前かぶりが多くて結構ややこしいですね。
自分も以前、他の方のブログを参考にライブラリを導入したらうまくいかなくて
よくよく調べたら全く同名の別のライブラリだったことが...続きを読む ∨

[yamady]

nnsnさま

ご丁寧に誠にありがとうございます。
大変助かりました。

ライブラリの名前ややこしいですよね。
こうして親切に教えていただきまして、すごくありがたかったです。

なんとかなりました！

今後ともなにとぞ、よろしくお願いいたします。