bootstarp4用のdatepickerでオプションが読めない

laravelとbootstrap4で日付け入力をカレンダーピッカーで入力できるテキストボックスを作成したいです。
カレンダーそのものは出せましたが、オプションがエラーで読み込めず書式を適用できず詰んでしまいました。
どなたか分かる方おられませんか？

ヘッダー部

html
1<head>
2    <meta charset="UTF-8">
3    <meta name="viewport" content="width=device-width, initial-scale=1.0">
4    <meta name="csrf-token" content="{{ csrf_token() }}">
5    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
6    <script src="{{url('/js/ajaxzip3.js')}}" charset="UTF-8"></script>
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css" />
9    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
10    <title>丸丸システム</title>
11</head>

body閉じタグの上

html
1    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
2    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
3    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
4    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
5    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
6    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js"></script>
7    <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js"></script>
8
9    <script src="{{ asset('js/app.js') }}"></script>
10    
11</body>

テキストボックスのタグ

html
1<input type="text" class="form-control datetimepicker-input" id="date_of_admission" data-toggle="datetimepicker" data-target="#date_of_admission" name="date_of_admission" value="{{ old('date_of_admission') }}"/>
2

このdatetimepicker()メソッドの引数に無名クラスのオブジェクトとしてオプションを渡していますが、これが完全に無視されてしまいます。

javascript
1<script type="text/javascript">
2
3  $(function () {
4      $('#date_of_admission').datetimepicker({
5                        locale: 'ja',
6                        format: "YYYY/MM/DD",
7                    });
8  });
9  
10</script>

カレンダー自体は下の写真のように出るようになりましたが、オプションが読み込めず書式を設定できません。
上のオプションだと時刻が出るのはおかしい。

デートピッカーに紐づいているテキストボックスにフォーカスすると下のエラーがブラウザのjavascriptコンソールに表示されます。

行動規範の内容に同意します

回答2件

scriptの読み込みにdeferを付けてみてください。

投稿2020/11/04 14:22

yuki84web

総合スコア1857

misskabu

2020/11/05 11:22

コメントありがとうございます。試してみましたが、結果は変わらずでした。カレンダー自体はスクリプトがなくても表示されるようなので、ライブラリが読めていないのかもしれません。

行動規範の内容に同意します

自己解決

解決しました。

原因はLaravelでvue.jsなどを使うために読み込んでいる。

の行でした。
これがあるとなぜかdatepickerが使えなくなります。
詳細は分かりませんが、ここを削除すると動きました。
内部でidか何かが競合していた可能性があります。
bladeのベースレイアウトで読み込んでいたのですが、datepickerを使いたい場合はレイアウトファイルを別にしてdatetpikcerに特化した<head>にしないといけないようです。
あるいはpackage.jsonやcomposer.jsonなど依存性設定ファイルの中を精査すれば両立できるのかもしれません。

投稿2020/11/05 12:09

misskabu

総合スコア28