Merge pull request #2152 from opensource-workshop/tempusdominus6

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

Author: akagane99

package-lock.json

@@ -10,7 +10,9 @@
         "production": "mix --production"
     },
     "devDependencies": {
+        "@eonasdan/tempus-dominus": "^6.10.2",
         "@fortawesome/fontawesome-free": "^6.7.2",
+        "@popperjs/core": "^2.11.8",
         "axios": "^1.6.1",
         "bootstrap": "^4.0.0",
         "jquery": "^3.7.0",
@@ -23,7 +25,6 @@
         "sass": "^1.62.1",
         "sass-loader": "^12.6.0",
         "sortablejs": "^1.15.2",
-        "tempusdominus-bootstrap-4": "^5.39.2",
         "vue": "^2.5.7",
         "vue-loader": "^17.3.0",
         "vue-template-compiler": "^2.7.14"

package.json

@@ -125,17 +125,35 @@ a.cc-icon-external:after {
     margin: 0 0 3px 5px;
 }
 
-/* datepicker
+/* Tempus Dominus Date/Time Picker
 ------------------------------------- */
-/* datepickerの土日 */
-.datepicker-days th.dow:first-child,
-.datepicker-days td:first-child {
+/* DateTimePickerの土日 */
+.date-container-days div.dow {
+    color: #000 !important;
+    font-weight: bold;
+}
+.date-container-days div.dow:first-child {
+    color: #c42626 !important;
+}
+.date-container-days div.dow:nth-child(7) {
+    color: #005dbf !important;
+}
+.date-container-days div.day.weekend {
     color: #c42626;
 }
-.datepicker-days th.dow:last-child,
-.datepicker-days td:last-child {
+.date-container-days div.day:nth-child(7n) {
     color: #005dbf;
 }
+.date-container-days div.day.old.weekend,
+.date-container-days div.day.new.weekend {
+    color: #00000060;
+}
+
+/* sideBySideの時間を縦中央表示 */
+.tempus-dominus-widget.timepicker-sbs .td-row {
+    display: flex;
+    align-items: center;
+}
 
 /*  プラグイン追加
 ------------------------------------- */

public/css/app.css

@@ -4,6 +4,12 @@
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
 
+/*!
+  * Tempus Dominus v6.10.0 (https://getdatepicker.com/)
+  * Copyright 2013-2025 Jonathan Peterson
+  * Licensed under MIT (https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE)
+  */
+
 /*!
  * The buffer module from node.js, for the browser.
  *
@@ -32,12 +38,6 @@
 
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
-/*!@preserve
- * Tempus Dominus Bootstrap4 v5.39.0 (https://tempusdominus.github.io/bootstrap-4/)
- * Copyright 2016-2020 Jonathan Peterson and contributors
- * Licensed under MIT (https://github.com/tempusdominus/bootstrap-3/blob/master/LICENSE)
- */
-
 /**
  * @license
  * Lodash <https://lodash.com/>
@@ -91,4 +91,4 @@
 
 //! moment.js locale configuration
 
-//! version : 0.5.47
+//! version : 0.5.48

public/css/connect.css

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=c59b5ef1c67ae3b8ae487f537305b3c1",
-    "/css/app.css": "/css/app.css?id=31d7351f318f55dd5ede42aeb63a0ae3"
+    "/js/app.js": "/js/app.js?id=1d213e4fd13b811592c95f870492094d",
+    "/css/app.css": "/css/app.css?id=94110667e125790f9646ca8f0c9d2382"
 }

public/js/707.js

@@ -60,8 +60,13 @@ if (token) {
  */
 window.moment = require('moment');
 import 'moment/locale/ja';
-require('tempusdominus-bootstrap-4');
+// require('tempusdominus-bootstrap-4');
 import 'moment-timezone';
 
+// Tempus Dominus Date/Time Picker
+window.tempusDominus = require('@eonasdan/tempus-dominus');
+// 下記でapp.jsに含めると、日付入力時に1度画面上部に飛ばされる動作をするため、含めない
+// window.Popper = require('@popperjs/core');
+
 // Default SortableJS
 window.Sortable = require('sortablejs').default;

public/js/app.js

@@ -10,10 +10,8 @@
 @import '~@fortawesome/fontawesome-free/scss/regular';
 @import '~@fortawesome/fontawesome-free/scss/brands';
 
-// Tempusdominus-bootstrap-4
-// tempusdominus-bootstrap-4-build.sass内のImport bootstrap variablesがパス間違いのため、別ファイルにして修正
-// @import '~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4-build';
-@import 'tempusdominus-bootstrap-4-build';
+// Tempus Dominus Date/Time Picker
+@import '~@eonasdan/tempus-dominus/src/scss/tempus-dominus';
 
 // Connect-CMS
 //mixin