migrate datetime picker to bs5
fix bs5 time picker fix datetime picker js error
This commit is contained in:
Michael Weimann
parent
63f0a08407
commit
b68af58321
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -3,32 +3,34 @@
|
|||
<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">
|
||||
<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%"
|
||||
>
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-secondary" title="Now" type="button">
|
||||
<span class="bi bi-clock"></span>
|
||||
</button>
|
||||
<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%"
|
||||
>
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-secondary" title="Now" type="button">
|
||||
<span class="bi bi-clock"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
–
|
||||
<div class="form-group">%end_select%</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group time">
|
||||
<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%"
|
||||
>
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-secondary" title="Now" type="button">
|
||||
<span class="bi bi-clock"></span>
|
||||
</button>
|
||||
–
|
||||
<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%"
|
||||
>
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-secondary" title="Now" type="button">
|
||||
<span class="bi bi-clock"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
43
yarn.lock
43
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue