Q&A
外部に置いたときに肝心のdatapicker.jsを呼び出していますか？
■やりたいこと
jQuery-uiのDatepickerをサイトに設置したい
■環境
xampp（PHP 7.4.11・Windows10）
Laravel 6.20.2
■症状
LaravelプロジェクトへjQuery-uiをインストールしコンパイル
jQuery-uiのバージョンの確認までできているがDatepickerが作動しない
■やったこと
①jQuery-uiをコンパイル・確認→失敗
まず、jQueryはコンパイルできていて自作の.jsファイルもコンパイルして動作確認ができている状況です。
npm install jquery-ui --save-dev
でjQuery-uiをインストール
npm run dev
でコンパイル
package.jsonでjquery-uiを確認
console.logでversion1.12.1を確認
この状況で、Datepickerの動作を確認するがカレンダーが表示されない
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<script src="{{ asset('js/app.js')}}"></script> 5<script src="{{ asset('js/add.js')}}"></script> ←自作の.js ソースは下に記載 6<link href="{{ asset('css/app.css')}}" rel="stylesheet"> 7<script> 8console.log('jQuery', $.fn.jquery); 9console.log('jQuery-ui', $.ui.version); 10</script> 11</head> 12<body> 13 <p>日付: <input type="text" id="datepicker"/></p> 14</body> 15</html>
javascript
1jQuery(function($) { 2 $("#datepicker").datepicker({ 3 showOn: 'both', 4 dateFormat: 'yy-mm-dd' 5 }); 6});
コンソールには以下のエラーが表示されていました。
②jQuery-uiのリンクを設置、動作確認→成功
jQuery-uiのリンクをベタで書くとカレンダーが表示される
→コンパイルで失敗していると推察
<!DOCTYPE html> <html> <head> <script src="{{ asset('js/app.js')}}"></script> <script src="{{ asset('js/add.js')}}"></script> <link href="{{ asset('css/app.css')}}" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> <script> console.log('jQuery', $.fn.jquery); console.log('jQuery-ui', $.ui.version); </script> </head> <body> <p>日付: <input type="text" id="datepicker"/></p> </body> </html>
③再度コンパイルを行う
再度コンパイルを行って表示に何かヒントが無いか確認
→WARNが出ていた
これが原因ではないかと思い、調べてみる
C:\xampp\htdocs\laravel>npm install jquery-ui --save-dev npm WARN tempusdominus-bootstrap-4@5.39.0 requires a peer of tempusdominus-core@5.19.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\watchpack\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + jquery-ui@1.12.1 updated 1 package and audited 1095 packages in 13.95s 49 packages are looking for funding run `npm fund` for details found 1 high severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details
最初の
npm WARN tempusdominus-bootstrap-4@5.39.0 requires a peer of tempusdominus-core@5.19.0 but none is installed. You must install peer dependencies yourself.
に関しては、
npm i tempusdominus-core
で表示しなくなったが残り4つは残っている。
run `npm audit fix` to fix them
とあったので
npm audit fix
を実行するが、結果は変わらず
C:\xampp\htdocs\laravel>npm audit fix npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\watchpack\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) up to date in 3.46s 49 packages are looking for funding run `npm fund` for details fixed 0 of 1 vulnerability in 1099 scanned packages 1 package update for 1 vulnerability involved breaking changes (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
というのが現状です。
正直なところ、WARNを潰すのが正解かもわかりません。
ご教授頂けますでしょうか。
宜しくお願い致します。
②では日本語表示させるために jquery.ui.datepicker-ja.min.js リンクを張っていますが、このリンクは無くてもDatepickerは表示されます。
なので個別にdatapicker.jsを呼び出す必要はないと思うのですが、認識が違っていたらご指摘ください。
不思議ですね。
「この状況で、Datepickerの動作を確認するがカレンダーが表示されない」のスクショのコンソールを見る限り、$("#datepicker").datepicker(...)でエラーには、なってないってことですよね。
あるいは、そこを通ってないのかな? ブレークはって、確認できますか?
ひょっとして、見えないだけで、ちゃんと(DOM的には)datepickerは出てるのかも?
コンソールに、$('#ui-datepicker-div').length と打ったら、1が返りませんかね?
すみません、エラーがコンソールに出ていたことが抜けていました。
②jQuery-uiのリンクを設置、動作確認→成功
の上に画像で追加しました。
あなたの回答
tips
プレビュー
