[日付入力] 日付入力ライブラリを tempusdominus-bootstrap-4 → @eonasdan/tempus-dominus v6に切替 OW-2520

[akagane99]

概要

• 日付入力ライブラリの tempusdominus-bootstrap-4 を @eonasdan/tempus-dominus (v6) に切り替えます。
• datetimepickerのjavascriptは resources/views/plugins/common/datetimepicker.blade.php の共通bladeを使うように対応
• 確認済み
  • サブディレクトリで動作する事を目検で確認済み
  • @popperjs/core (v2) と popper.js (v1) を両方入れても、bootstrap4 の ツールチップ(popper.js (v1) )が表示する事を目検で確認済み

npmライブラリ 更新コマンド

npm uninstall tempusdominus-bootstrap-4
npm i --save-dev @popperjs/core @eonasdan/tempus-dominus

# ライブラリの最新化
npm update

# app.js, app.cssの最新化
npm run prod

コマンド実行結果

root@37ea93425cea:/var/www/html/connect-cms# npm update

up to date, audited 793 packages in 16s

116 packages are looking for funding
  run `npm fund` for details

3 vulnerabilities (1 low, 2 moderate)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
root@37ea93425cea:/var/www/html/connect-cms# npm run prod

> prod
> npm run production


> production
> mix --production


● Mix █████████████████████████ done (99%) plugins 
 BuildCallbackPlugin

● Mix █████████████████████████ done (99%) plugins 
 WebpackBar:done

✔ Mix
  Compiled successfully in 7.95s
                         
   Laravel Mix v6.0.49   
                         

✔ Compiled Successfully in 7777ms
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                                                                                          File │ Size     │
├───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                                                                                                    /js/app.js │ 1.49 MiB │
│                                                                                                                                                        /js/app.js.LICENSE.txt │ 2.9 KiB  │
│                                                                                                                                                                   css/app.css │ 285 KiB  │
│                                                                              fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?1815e00441357e01619e5793e1caa78a │ 206 KiB  │
│                                                                            fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?c210719e60948b211a1260f79812efe5 │ 116 KiB  │
│                                                                             fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?914997e1bdfc990d0897cdaba877a0b3 │ 66.5 KiB │
│                                                                           fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?89999bdf5d835c0120257222e5568fec │ 24.9 KiB │
│                                                                               fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?2582b0e4bcf85eceead0de3fd9035c90 │ 416 KiB  │
│                                                                             fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?2463b90d9a316e4e5294e6706b6a7a72 │ 155 KiB  │
│                                                                                                                                                                     js/707.js │ 19.1 KiB │
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully

※ js/707.jsは @popperjs/core。Tempus Dominus Date/Time Pickerで使用

github actionsでテスト

• Laravel Dusk Connect-cms-test matrix · e72ac17
  https://github.com/opensource-workshop/connect-cms/actions/runs/14102104528
  → エラーなしを確認

wiki修正済み

• https://github.com/opensource-workshop/connect-cms/wiki/Datetimepicker

レビュー完了希望日

なし

関連Pull requests/Issues

• [アイコン] fortawesome5→6へアップグレード OW-2522 #2137

参考

• tempusdominus v6
  • Options - Tempus Dominus
    https://getdatepicker.com/6/options/
  • Download - Tempus Dominus
    https://getdatepicker.com/6/installing.html

    • (機械翻訳) ファイルの取得方法に関係なく、ピッカーのメインスクリプトファイルの前に【Popper】が含まれていることを確認してください。
      また、フォントライブラリも必要になります。ピッカーの既定値は 【Font Awesome 6】 ですが、別のアイコン セットを指定できます 設定またはプラグインを介して。

  • Bootstrap 5でDateTimePicker(tempusdominus v6)を使いたい #DatePicker - Qiita
    https://qiita.com/yaju/items/247813a10546353bd7c8
• popper.js v2 + Laravel Mixで導入
  • javascript - How do I add popper.js to a Laravel 8 with Bootstrap 5 project? - Stack Overflow
    https://stackoverflow.com/questions/71537172/how-do-i-add-popper-js-to-a-laravel-8-with-bootstrap-5-project

    • window.Popper = require('@popperjs/core');

• Bootstrap 4はpopper.js v1依存
  • Tooltips - Bootstrap 4.2 - 日本語リファレンス
    https://getbootstrap.jp/docs/4.2/components/tooltips/

DB変更の有無

無し

チェックリスト

• (DB変更有りの場合) 移行プログラムに影響がない事を確認しました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-check-list---Migration
• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule

[Copilot]

Pull Request Overview

This PR updates the date input library from tempusdominus-bootstrap-4 to @eonasdan/tempus-dominus v6 to support newer features and maintain up‐to‐date dependencies.

• Removed the old tempusdominus-bootstrap-4 require call.
• Introduced the new @eonasdan/tempus-dominus library for date/time picker support.

Files not reviewed (19)

• package.json: Language not supported
• public/css/connect.css: Language not supported
• public/js/app.js.LICENSE.txt: Language not supported
• public/mix-manifest.json: Language not supported
• resources/sass/app.scss: Language not supported
• resources/views/core/cms_frame_edit.blade.php: Language not supported
• resources/views/plugins/common/datetimepicker.blade.php: Language not supported
• resources/views/plugins/manage/holiday/edit.blade.php: Language not supported
• resources/views/plugins/manage/log/log.blade.php: Language not supported
• resources/views/plugins/manage/reservation/bookings.blade.php: Language not supported
• resources/views/plugins/manage/reservation/edit.blade.php: Language not supported
• resources/views/plugins/user/blogs/default/blogs_input.blade.php: Language not supported
• resources/views/plugins/user/blogs/default/blogs_list_categories.blade.php: Language not supported
• resources/views/plugins/user/blogs/default/blogs_setting_frame.blade.php: Language not supported
• resources/views/plugins/user/calendars/default/edit.blade.php: Language not supported
• resources/views/plugins/user/databases/default/databases_input.blade.php: Language not supported
• resources/views/plugins/user/databases/default/databases_input_date.blade.php: Language not supported
• resources/views/plugins/user/databases/default/databases_input_time.blade.php: Language not supported
• resources/views/plugins/user/faqs/default/faqs_input.blade.php: Language not supported

Comments suppressed due to low confidence (2)

resources/js/bootstrap.js:63

• [nitpick] If the old library is no longer used, please remove the commented-out require statement to clean up the code.

// require('tempusdominus-bootstrap-4');

resources/js/bootstrap.js:67

• [nitpick] Consider using a consistent import style (e.g. using ES module import) if the rest of the project follows that convention for module loading.

window.tempusDominus = require('@eonasdan/tempus-dominus');