From b68af58321a8d715a8d28569d375b380286a9af8 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Sat, 24 Jul 2021 18:31:02 +0200 Subject: [PATCH] migrate datetime picker to bs5 fix bs5 time picker fix datetime picker js error --- includes/sys_form.php | 8 ++-- package.json | 4 +- resources/assets/js/forms.js | 38 +++++++++++++++---- resources/assets/js/vendor.js | 2 +- resources/assets/themes/base.scss | 13 ++++++- resources/views/pages/user-shifts.html | 52 +++++++++++++------------- yarn.lock | 43 +++++++++++---------- 7 files changed, 96 insertions(+), 64 deletions(-) diff --git a/includes/sys_form.php b/includes/sys_form.php index fccdfacc..3e2222f2 100644 --- a/includes/sys_form.php +++ b/includes/sys_form.php @@ -94,12 +94,12 @@ function form_datetime(string $name, string $label, $value) } return form_element($label, sprintf(' -
+
' - . '' . icon('grid-3x3-gap-fill') . ' + class="form-control" value="%s" autocomplete="off" data-target="#%s">' + . '' . icon('grid-3x3-gap-fill') . '
- ', $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); } /** diff --git a/package.json b/package.json index 28ccfee8..0c97ee68 100644 --- a/package.json +++ b/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", diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js index ed0f9a46..323b6290 100644 --- a/resources/assets/js/forms.js +++ b/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(); } }); + }); }); diff --git a/resources/assets/js/vendor.js b/resources/assets/js/vendor.js index e0fc09f2..d0c1731c 100644 --- a/resources/assets/js/vendor.js +++ b/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'); diff --git a/resources/assets/themes/base.scss b/resources/assets/themes/base.scss index 49cacf5d..26470aa3 100644 --- a/resources/assets/themes/base.scss +++ b/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; diff --git a/resources/views/pages/user-shifts.html b/resources/views/pages/user-shifts.html index 479aa823..bd2179d5 100644 --- a/resources/views/pages/user-shifts.html +++ b/resources/views/pages/user-shifts.html @@ -3,32 +3,34 @@

%title%

-
%start_select%
-
-
- -
- +
+
%start_select%
+
+
+ +
+ +
-
- – -
%end_select%
-
-
- -
- + – +
%end_select%
+
+
+ +
+ +
@@ -44,8 +46,6 @@ %set_next_4h% %set_next_8h%
-
-
%buttons%
diff --git a/yarn.lock b/yarn.lock index 6225eb29..7aa34037 100644 --- a/yarn.lock +++ b/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"