migrate datetime picker to bs5

fix bs5 time picker

fix datetime picker js error

includes/sys_form.php

@@ -94,12 +94,12 @@ function form_datetime(string $name, string $label, $value)
     }
 
     return form_element($label, sprintf('
-    <div class="input-group datetime" id="%s">
+    <div class="input-group datetime" id="%s" data-target-input="nearest">
         <input type="datetime-local" placeholder="YYYY-MM-DD HH:MM" name="%s"
-            class="form-control" value="%s" autocomplete="off">'
-        . '<span class="input-group-addon">' . icon('grid-3x3-gap-fill') . '</span>
+            class="form-control" value="%s" autocomplete="off" data-target="#%s">'
+        . '<span class="input-group-text">' . icon('grid-3x3-gap-fill') . '</span>
     </div>
-    ', $dom_id, $name, htmlspecialchars($value ? $value->format('Y-m-d H:i') : '')), $dom_id);
+    ', $dom_id, $name, htmlspecialchars($value ? $value->format('Y-m-d H:i') : ''), $dom_id), $dom_id);
 }
 
 /**

package.json

@@ -16,13 +16,13 @@
     "bootstrap": "^5.0.0",
     "chart.js": "^2.9.3",
     "core-js": "^3.6.5",
-    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
     "jquery": "^3.5.1",
     "jquery-ui": "^1.11.2",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
     "select2": "^4.0.13",
-    "select2-bootstrap-5-theme": "^1.1.1"
+    "select2-bootstrap-5-theme": "^1.1.1",
+    "tempusdominus-bootstrap-4": "^5.39.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",

resources/assets/js/forms.js

@@ -108,7 +108,13 @@ $(function () {
                 maxDate: '',
                 locale: $('html').attr('lang'),
                 format: element.format,
-                widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
+                widgetPositioning: {horizontal: 'auto', vertical: 'bottom'},
+                icons: {
+                    time: 'bi bi-clock',
+                    date: 'bi bi-calendar',
+                    up: 'bi bi-arrow-up',
+                    down: 'bi bi-arrow-down'
+                }
             };
             $.extend(opts, elem.data());
             if (opts.minDate.length === 0) {
@@ -120,13 +126,19 @@ $(function () {
             elem.children('input').attr('type', 'text');
             elem.children().on('click', function (ev) {
                 ev.stopImmediatePropagation();
-                if (typeof elem.data('DateTimePicker') === 'undefined') {
+                if (typeof elem.data('datetimepicker') === 'undefined') {
                     elem.datetimepicker(opts);
-                    elem.data('DateTimePicker').show();
+                    elem.data('datetimepicker').show();
+
+                    // close on click anywhere outside
+                    $(document).on('click', () => {
+                        elem.data('datetimepicker').hide()
+                    })
                 } else {
-                    elem.data('DateTimePicker').toggle();
+                    elem.data('datetimepicker').toggle();
                 }
             });
+
         });
     });
 });
@@ -140,19 +152,29 @@ $(function () {
         var opts = {
             locale: $('html').attr('lang'),
             format: 'HH:mm',
-            widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
+            widgetPositioning: {horizontal: 'auto', vertical: 'bottom'},
+            icons: {
+                up: 'bi bi-arrow-up',
+                down: 'bi bi-arrow-down'
+            }
         };
         $.extend(opts, elem.data());
         elem.children('input').attr('type', 'text');
         elem.children('input').on('click', function (ev) {
             ev.stopImmediatePropagation();
-            if (typeof elem.data('DateTimePicker') === 'undefined') {
+            if (typeof elem.data('datetimepicker') === 'undefined') {
                 elem.datetimepicker(opts);
-                elem.data('DateTimePicker').show();
+                elem.data('datetimepicker').show();
+
+                // close on click anywhere outside
+                $(document).on('click', () => {
+                    elem.data('datetimepicker').hide()
+                })
             } else {
-                elem.data('DateTimePicker').toggle();
+                elem.data('datetimepicker').toggle();
             }
         });
+
     });
 });
 

resources/assets/js/vendor.js

@@ -4,7 +4,7 @@ require('jquery-ui');
 window.bootstrap = require('bootstrap');
 window.moment = require('moment');
 require('moment/locale/de');
-require('eonasdan-bootstrap-datetimepicker');
+require('tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4');
 require('chart.js');
 require('./offcanvas');
 require('./forms');

resources/assets/themes/base.scss

@@ -17,7 +17,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 @import "~bootstrap/scss/bootstrap";
 
 @import "~bootstrap-icons/font/bootstrap-icons.css";
-@import "~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css";
+@import "~tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4";
 @import "~select2/src/scss/core";
 @import "~select2-bootstrap-5-theme/src/include-all";
 @import "error";
@@ -82,6 +82,17 @@ table a > .icon-icon_angel {
   background-color: $body-color;
 }
 
+.table .form-group {
+  margin-bottom: 0;
+}
+
+.input-group.datetime,
+.input-group.time {
+    .bootstrap-datetimepicker-widget {
+        inset: 42px auto auto 0 !important;
+    }
+}
+
 .stats {
   font-size: 20px;
   height: 150px;

resources/views/pages/user-shifts.html

@@ -3,9 +3,10 @@
     <div class="row">
         <div class="col-md-6">
             <h1>%title%</h1>
-            <div class="form-group">%start_select%</div>
-            <div class="form-group">
-                <div class="input-group time">
+            <div class="row align-items-center">
+                <div class="col-2">%start_select%</div>
+                <div class="col-2">
+                    <div class="input-group time" data-target-input="nearest">
                         <input
                             type="time" class="form-control" id="start_time" name="start_time" size="5"
                             pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%"
@@ -18,9 +19,9 @@
                     </div>
                 </div>
                 &#8211;
-            <div class="form-group">%end_select%</div>
-            <div class="form-group">
-                <div class="input-group time">
+                <div class="col-2">%end_select%</div>
+                <div class="col-2">
+                    <div class="input-group time" data-target-input="nearest">
                         <input
                             type="time" class="form-control" id="end_time" name="end_time" size="5"
                             pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%end_time%"
@@ -32,6 +33,7 @@
                         </div>
                     </div>
                 </div>
+            </div>
             <div class="form-group d-print-none" style="margin-top: .5em">
                 <div class="btn-group">
                     <a href="javascript:setDay(-1)" class="btn btn-secondary ">%set_yesterday%</a>
@@ -44,8 +46,6 @@
                     <a href="javascript:setHours(4)" class="btn btn-secondary ">%set_next_4h%</a>
                     <a href="javascript:setHours(8)" class="btn btn-secondary ">%set_next_8h%</a>
                 </div>
-            </div>
-            <div class="form-group d-print-none" style="margin-top: .5em">
                 <div class="btn-group">
                     %buttons%
                 </div>

yarn.lock

@@ -1231,10 +1231,10 @@ bootstrap@5.0.0-beta2:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta2.tgz#ab1504a12807fa58e5e41408e35fcea42461e84b"
   integrity sha512-e+uPbPHqTQWKyCX435uVlOmgH9tUt0xtjvyOC7knhKgOS643BrQKuTo+KecGpPV7qlmOyZgCfaM4xxPWtDEN/g==
 
-bootstrap@^3.3:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"
-  integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==
+bootstrap@^4.5.2:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
+  integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
 
 bootstrap@^5.0.0:
   version "5.0.2"
@@ -1671,16 +1671,6 @@ envinfo@^7.7.3:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
   integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
 
-eonasdan-bootstrap-datetimepicker@^4.17.47:
-  version "4.17.49"
-  resolved "https://registry.yarnpkg.com/eonasdan-bootstrap-datetimepicker/-/eonasdan-bootstrap-datetimepicker-4.17.49.tgz#5534ba581c1e7eb988dbf773e2fed8a7f48cc76a"
-  integrity sha512-7KZeDpkj+A6AtPR3XjX8gAnRPUkPSfW0OmMANG1dkUOPMtLSzbyoCjDIdEcfRtQPU5X0D9Gob7wWKn0h4QWy7A==
-  dependencies:
-    bootstrap "^3.3"
-    jquery "^3.5.1"
-    moment "^2.10"
-    moment-timezone "^0.4.0"
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -2265,13 +2255,6 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-moment-timezone@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.4.1.tgz#81f598c3ad5e22cdad796b67ecd8d88d0f5baa06"
-  integrity sha1-gfWYw61eIs2teWtn7NjYjQ9bqgY=
-  dependencies:
-    moment ">= 2.6.0"
-
 moment-timezone@^0.5.31:
   version "0.5.33"
   resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.33.tgz#b252fd6bb57f341c9b59a5ab61a8e51a73bbd22c"
@@ -2279,7 +2262,7 @@ moment-timezone@^0.5.31:
   dependencies:
     moment ">= 2.9.0"
 
-"moment@>= 2.6.0", "moment@>= 2.9.0", moment@^2.10, moment@^2.10.2, moment@^2.27.0:
+"moment@>= 2.9.0", moment@^2.10.2, moment@^2.27.0, moment@^2.29.0:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
@@ -2452,6 +2435,11 @@ plugin-error@^1.0.1:
     arr-union "^3.1.0"
     extend-shallow "^3.0.2"
 
+popper.js@^1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 postcss-calc@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.0.0.tgz#a05b87aacd132740a5db09462a3612453e5df90a"
@@ -3094,6 +3082,17 @@ tapable@^2.1.1, tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.0.tgz#5c373d281d9c672848213d0e037d1c4165ab426b"
   integrity sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==
 
+tempusdominus-bootstrap-4@^5.39.0:
+  version "5.39.0"
+  resolved "https://registry.yarnpkg.com/tempusdominus-bootstrap-4/-/tempusdominus-bootstrap-4-5.39.0.tgz#f13dcfec6c41b37c5fe509f08bd513590c64411f"
+  integrity sha512-vYnkmQYQq4+A51WyRc/6e03eM0BHDoPaxd556K1pd4Nhr0eGeB3+Mi9b+3CDx4189fg3gQlrsKzgJiHPRwSX3Q==
+  dependencies:
+    bootstrap "^4.5.2"
+    jquery "^3.5.1"
+    moment "^2.29.0"
+    moment-timezone "^0.5.31"
+    popper.js "^1.16.1"
+
 terser-webpack-plugin@^5.1.1, terser-webpack-plugin@^5.1.3:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.1.4.tgz#c369cf8a47aa9922bd0d8a94fe3d3da11a7678a1"