kontakt
/
engelsystem
3
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

migrate datetime picker to bs5

Browse Source 
fix bs5 time picker

fix datetime picker js error
main
Michael Weimann 3 years ago
parent 63f0a08407
commit b68af58321
No known key found for this signature in database
GPG Key ID: 34F0524D4DA694A1
7 changed files with 96 additions and 64 deletions
Show Stats Download Patch File Download Diff File

8
includes/sys_form.php
Unescape Escape View File

@ -94,12 +94,12 @@ function form_datetime(string $name, string $label, $value)
} }
return form_element($label, sprintf(' 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" <input type="datetime-local" placeholder="YYYY-MM-DD HH:MM" name="%s"
class="form-control" value="%s" autocomplete="off">' class="form-control" value="%s" autocomplete="off" data-target="#%s">'
. '<span class="input-group-addon">' . icon('grid-3x3-gap-fill') . '</span> . '<span class="input-group-text">' . icon('grid-3x3-gap-fill') . '</span>
</div> </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);
} }
/** /**

4
package.json
Unescape Escape View File

@ -16,13 +16,13 @@
"bootstrap": "^5.0.0", "bootstrap": "^5.0.0",
"chart.js": "^2.9.3", "chart.js": "^2.9.3",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"eonasdan-bootstrap-datetimepicker": "^4.17.47",
"jquery": "^3.5.1", "jquery": "^3.5.1",
"jquery-ui": "^1.11.2", "jquery-ui": "^1.11.2",
"moment": "^2.27.0", "moment": "^2.27.0",
"moment-timezone": "^0.5.31", "moment-timezone": "^0.5.31",
"select2": "^4.0.13", "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": { "devDependencies": {
"@babel/core": "^7.11.5", "@babel/core": "^7.11.5",

38
resources/assets/js/forms.js
Unescape Escape View File

@ -108,7 +108,13 @@ $(function () {
maxDate: '', maxDate: '',
locale: $('html').attr('lang'), locale: $('html').attr('lang'),
format: element.format, 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()); $.extend(opts, elem.data());
if (opts.minDate.length === 0) { if (opts.minDate.length === 0) {
@ -120,13 +126,19 @@ $(function () {
elem.children('input').attr('type', 'text'); elem.children('input').attr('type', 'text');
elem.children().on('click', function (ev) { elem.children().on('click', function (ev) {
ev.stopImmediatePropagation(); ev.stopImmediatePropagation();
if (typeof elem.data('DateTimePicker') === 'undefined') { if (typeof elem.data('datetimepicker') === 'undefined') {
elem.datetimepicker(opts); elem.datetimepicker(opts);
elem.data('DateTimePicker').show(); elem.data('datetimepicker').show();
// close on click anywhere outside
$(document).on('click', () => {
elem.data('datetimepicker').hide()
})
} else { } else {
elem.data('DateTimePicker').toggle(); elem.data('datetimepicker').toggle();
} }
}); });
}); });
}); });
}); });
@ -140,19 +152,29 @@ $(function () {
var opts = { var opts = {
locale: $('html').attr('lang'), locale: $('html').attr('lang'),
format: 'HH:mm', 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()); $.extend(opts, elem.data());
elem.children('input').attr('type', 'text'); elem.children('input').attr('type', 'text');
elem.children('input').on('click', function (ev) { elem.children('input').on('click', function (ev) {
ev.stopImmediatePropagation(); ev.stopImmediatePropagation();
if (typeof elem.data('DateTimePicker') === 'undefined') { if (typeof elem.data('datetimepicker') === 'undefined') {
elem.datetimepicker(opts); elem.datetimepicker(opts);
elem.data('DateTimePicker').show(); elem.data('datetimepicker').show();
// close on click anywhere outside
$(document).on('click', () => {
elem.data('datetimepicker').hide()
})
} else { } else {
elem.data('DateTimePicker').toggle(); elem.data('datetimepicker').toggle();
} }
}); });
}); });
}); });

2
resources/assets/js/vendor.js
Unescape Escape View File

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

13
resources/assets/themes/base.scss
Unescape Escape View File

@ -17,7 +17,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
@import "~bootstrap/scss/bootstrap"; @import "~bootstrap/scss/bootstrap";
@import "~bootstrap-icons/font/bootstrap-icons.css"; @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/src/scss/core";
@import "~select2-bootstrap-5-theme/src/include-all"; @import "~select2-bootstrap-5-theme/src/include-all";
@import "error"; @import "error";
@ -82,6 +82,17 @@ table a > .icon-icon_angel {
background-color: $body-color; 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 { .stats {
font-size: 20px; font-size: 20px;
height: 150px; height: 150px;

16
resources/views/pages/user-shifts.html
Unescape Escape View File

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

43
yarn.lock
Unescape Escape View File

@ -1231,10 +1231,10 @@ bootstrap@5.0.0-beta2:
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta2.tgz#ab1504a12807fa58e5e41408e35fcea42461e84b" resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta2.tgz#ab1504a12807fa58e5e41408e35fcea42461e84b"
integrity sha512-e+uPbPHqTQWKyCX435uVlOmgH9tUt0xtjvyOC7knhKgOS643BrQKuTo+KecGpPV7qlmOyZgCfaM4xxPWtDEN/g== integrity sha512-e+uPbPHqTQWKyCX435uVlOmgH9tUt0xtjvyOC7knhKgOS643BrQKuTo+KecGpPV7qlmOyZgCfaM4xxPWtDEN/g==
bootstrap@^3.3: bootstrap@^4.5.2:
version "3.4.1" version "4.6.0"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72" resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA== integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
bootstrap@^5.0.0: bootstrap@^5.0.0:
version "5.0.2" version "5.0.2"
@ -1671,16 +1671,6 @@ envinfo@^7.7.3:
resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475" resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw== 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: error-ex@^1.3.1:
version "1.3.2" version "1.3.2"
resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@ -2265,13 +2255,6 @@ mkdirp@^0.5.1:
dependencies: dependencies:
minimist "^1.2.5" 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: moment-timezone@^0.5.31:
version "0.5.33" version "0.5.33"
resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.33.tgz#b252fd6bb57f341c9b59a5ab61a8e51a73bbd22c" resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.33.tgz#b252fd6bb57f341c9b59a5ab61a8e51a73bbd22c"
@ -2279,7 +2262,7 @@ moment-timezone@^0.5.31:
dependencies: dependencies:
moment ">= 2.9.0" 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" version "2.29.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
@ -2452,6 +2435,11 @@ plugin-error@^1.0.1:
arr-union "^3.1.0" arr-union "^3.1.0"
extend-shallow "^3.0.2" 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: postcss-calc@^8.0.0:
version "8.0.0" version "8.0.0"
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.0.0.tgz#a05b87aacd132740a5db09462a3612453e5df90a" 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" resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.0.tgz#5c373d281d9c672848213d0e037d1c4165ab426b"
integrity sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw== 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: terser-webpack-plugin@^5.1.1, terser-webpack-plugin@^5.1.3:
version "5.1.4" version "5.1.4"
resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.1.4.tgz#c369cf8a47aa9922bd0d8a94fe3d3da11a7678a1" resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.1.4.tgz#c369cf8a47aa9922bd0d8a94fe3d3da11a7678a1"

Write Preview
Loading…
Cancel
Save