c73cb7a2cf
This patch corrects an issue where flatpickr time-only input boxes
boxes were not having their inputs masked (limited) properly
due to maskitoTimeOptionsGenerator not properly supporting
12-hour time inputs for time-only input boxes.
To test:
1. Login to the staff intranet.
2. Open Administration->Libraries-> Edit any library.
3. Open your browser's development console (typically via F12)
Verify a 'TypeError' message has been thrown for this page.
4. Type in any text into any of the opening hours
This should be limiting only to properly formatted HH:MM.
5. Apply patch
6. Repeat steps 2-4
Verify no errors show on your browser's development console.
Verify opening hours entry are limited to proper HH:MM format.
7. Open Administration->System Preferences and change TimeFormat
to 12-hours, Save.
8. Repeat steps 2-4
Verify opening hours text entry are limited to properly
formatted HH:MM AM/PM (or am/pm)
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
280 lines
11 KiB
PHP
280 lines
11 KiB
PHP
[% USE Asset %]
|
|
[% USE Koha %]
|
|
[% USE raw %]
|
|
<!-- calendar.inc -->
|
|
[% FILTER collapse %]
|
|
<script>
|
|
var debug = "[% debug | html %]";
|
|
var dateformat_pref = "[% Koha.Preference('dateformat') | html %]";
|
|
var flatpickr_dateformat_string = "";
|
|
var delimiter = "";
|
|
var altinput_dateformat = "";
|
|
switch ( dateformat_pref ){
|
|
case "us":
|
|
flatpickr_dateformat_string = "m/d/Y";
|
|
altinput_dateformat = 'mm/dd/yyyy';
|
|
delimiter = "/";
|
|
break;
|
|
case "metric":
|
|
flatpickr_dateformat_string = "d/m/Y";
|
|
altinput_dateformat = 'dd/mm/yyyy';
|
|
delimiter = "/";
|
|
break;
|
|
case "dmydot":
|
|
flatpickr_dateformat_string = "d.m.Y";
|
|
altinput_dateformat = 'dd/mm/yyyy';
|
|
delimiter = ".";
|
|
break;
|
|
default:
|
|
flatpickr_dateformat_string = "Y-m-d";
|
|
altinput_dateformat = 'yyyy/mm/dd';
|
|
delimiter = "-";
|
|
}
|
|
var sentmsg = 0;
|
|
var bidi = [% IF(bidi) %] true[% ELSE %] false[% END %];
|
|
var calendarFirstDayOfWeek = '[% Koha.Preference('CalendarFirstDayOfWeek') | html %]';
|
|
var flatpickr_timeformat_string = [% IF Koha.Preference('TimeFormat') == '12hr' %]"G:i K"[% ELSE %]"H:i"[% END %];
|
|
var flatpickr_timeformat = [% IF Koha.Preference('TimeFormat') == '12hr' %]false[% ELSE %]true[% END %];
|
|
</script>
|
|
<!-- / calendar.inc -->
|
|
[% Asset.js("js/calendar.js") | $raw %]
|
|
[% Asset.js("lib/flatpickr/flatpickr.min.js") | $raw %]
|
|
[% Asset.js("lib/flatpickr/shortcut-buttons-flatpickr.min.js") | $raw %]
|
|
[% Asset.js("lib/maskito/maskito.core.js") | $raw %]
|
|
[% Asset.js("lib/maskito/maskito.kit.js") | $raw %]
|
|
<script>
|
|
flatpickr.l10ns.default.weekdays = flatpickr_weekdays;
|
|
flatpickr.l10ns.default.months = flatpickr_months;
|
|
let flatpickr_defaults = {
|
|
allowInput: true,
|
|
dateFormat: "Y-m-d",
|
|
altInput: true,
|
|
altFormat: flatpickr_dateformat_string,
|
|
altInputClass: 'flatpickr-input',
|
|
nextArrow: '<i class="fa fa-fw fa-arrow-right"></i>',
|
|
prevArrow: '<i class="fa fa-fw fa-arrow-left"></i>',
|
|
time_24hr: flatpickr_timeformat,
|
|
defaultHour: 23,
|
|
defaultMinute: 59,
|
|
locale: {
|
|
"firstDayOfWeek": calendarFirstDayOfWeek
|
|
},
|
|
onReady: function( selectedDates, dateStr, instance ){
|
|
|
|
/* When onReady is triggered, remove any existing "clear date" link */
|
|
$(instance.input).parent().find('.flatpickr_wrapper_' + instance.input.id).remove();
|
|
|
|
/* When flatpickr instance is created, automatically append a "clear date" link */
|
|
$(instance.input).find('~input.flatpickr:first')
|
|
/* Add a wrapper element so that we can prevent the clear button from wrapping */
|
|
.wrap("<span class='flatpickr_wrapper flatpickr_wrapper_"+instance.input.id+"'></span>")
|
|
.attr("autocomplete", "off")
|
|
.after( $("<a/>")
|
|
.attr("href","#")
|
|
.addClass("clear_date")
|
|
.on("click", function(e){
|
|
e.preventDefault();
|
|
instance.clear();
|
|
})
|
|
.addClass("fa fa-fw fa-times")
|
|
.attr("aria-hidden", true)
|
|
.attr("aria-label", _("Clear date") )
|
|
).keydown(function(e) {
|
|
var key = (event.keyCode ? event.keyCode : event.which);
|
|
if ( key == 40 ) {
|
|
instance.set('allowInput',false);
|
|
}
|
|
});
|
|
/* When flatpickr instance is ready, add maskito input mask */
|
|
var thisInput = instance.input;
|
|
let accepts_time = $(thisInput).data('flatpickr-enable-time');
|
|
let accepts_period = $(thisInput).data('flatpickr-period');
|
|
let accepts_time_only = $(thisInput).data('flatpickr-time-only');
|
|
let maskitoOptions = {};
|
|
if ( !accepts_period ) {
|
|
if ( accepts_time ) {
|
|
maskitoOptions = maskitoDateTimeOptionsGenerator({
|
|
dateMode: altinput_dateformat,
|
|
timeMode: 'HH:MM',
|
|
dateSeparator: delimiter,
|
|
overwiteMode: 'replace',
|
|
});
|
|
} else if ( accepts_time_only ) {
|
|
maskitoOptions = {
|
|
[% IF Koha.Preference('TimeFormat') == '12hr' -%] mask: [/\d/, /\d/, ':', /\d/, /\d/, ' ', /(a|A|p|P)/, /(m|M)/]
|
|
[%- ELSE -%]mask: [/\d/, /\d/, ':', /\d/, /\d/]
|
|
[%- END %],
|
|
};
|
|
} else {
|
|
maskitoOptions = maskitoDateOptionsGenerator({
|
|
mode: altinput_dateformat,
|
|
separator: delimiter,
|
|
overwiteMode: 'replace',
|
|
});
|
|
}
|
|
}
|
|
new Maskito( instance.altInput, maskitoOptions );
|
|
},
|
|
onChange: function( selectedDates, dateText, instance) {
|
|
if (selectedDates.length === 0) {
|
|
return;
|
|
}
|
|
|
|
var thisInput = instance.input;
|
|
let accepts_time = $(thisInput).data('flatpickr-enable-time');
|
|
let accepts_time_only = $(thisInput).data('flatpickr-time-only');
|
|
let accepts_period = $(thisInput).data('flatpickr-period');
|
|
if ( !accepts_period ) {
|
|
if ( accepts_time ) {
|
|
let parsedDate = flatpickr.parseDate(dateText, instance.config.dateFormat);
|
|
if ( Number.isNaN(parsedDate.getHours()) ) {
|
|
instance.setDate(selectedDates[0].setHours(23, 59, 0, 0));
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onClose: function( selectedDates, dateText, instance) {
|
|
validate_date( dateText, instance );
|
|
var thisInput = instance.input;
|
|
if ( thisInput.hasAttribute('data-date_to') ) {
|
|
var endPicker = document.querySelector("#"+thisInput.dataset.date_to)._flatpickr;
|
|
endPicker.set('minDate', selectedDates[0]);
|
|
}
|
|
|
|
let = on_close_focus = $(thisInput).data('flatpickr-on-close-focus');
|
|
if ( on_close_focus ) {
|
|
$(on_close_focus).focus();
|
|
}
|
|
},
|
|
plugins: [
|
|
ShortcutButtonsPlugin({
|
|
button: [
|
|
{
|
|
label: _("Yesterday")
|
|
},
|
|
{
|
|
label: _("Today")
|
|
},
|
|
{
|
|
label: _("Tomorrow")
|
|
}
|
|
],
|
|
label: _("or"),
|
|
onClick: (index, fp) => {
|
|
let date;
|
|
let hh = 23, mm = 59;
|
|
switch (index) {
|
|
case 0:
|
|
date = new Date().fp_incr(-1);
|
|
break;
|
|
case 1:
|
|
date = new Date();
|
|
if ( $(fp.input).data("flatpickr-pastinclusive") === true ) {
|
|
hh = date.getHours();
|
|
mm = date.getMinutes();
|
|
}
|
|
break;
|
|
case 2:
|
|
date = new Date().fp_incr(1);
|
|
break;
|
|
}
|
|
date.setHours(hh, mm, 0, 0);
|
|
fp.setDate(date);
|
|
}
|
|
})
|
|
]
|
|
};
|
|
|
|
flatpickr.setDefaults(flatpickr_defaults);
|
|
|
|
function apply_flatpickr(input){
|
|
let options = {};
|
|
let refresh_max_date = 0;
|
|
let disable_buttons = [];
|
|
|
|
if( $(input).data("flatpickr-futureinclusive") === true
|
|
|| $(input).data("flatpickr-futuredate") === true ) {
|
|
let original_date = $(input).val();
|
|
if ( original_date ) {
|
|
original_date = flatpickr.parseDate(original_date, 'Y-m-d').getTime();
|
|
let tomorrow = new Date().fp_incr(1).getTime();
|
|
|
|
options['enable'] = [function(date){
|
|
date = date.getTime();
|
|
if ( date == original_date ) return true;
|
|
if ( date >= tomorrow) return true;
|
|
}];
|
|
}
|
|
else {
|
|
if( $(input).data("flatpickr-futureinclusive") === true ) {
|
|
options['minDate'] = new Date().setHours(00, 00, 00, 00);
|
|
} else {
|
|
options['minDate'] = new Date().fp_incr(1);
|
|
}
|
|
}
|
|
|
|
disable_buttons.push(0); /* Yesterday */
|
|
|
|
if ( $(input).data("flatpickr-futuredate") === true ) {
|
|
disable_buttons.push(1); /* Today */
|
|
}
|
|
}
|
|
if( $(input).data("flatpickr-pastinclusive") === true ) {
|
|
options['maxDate'] = new Date(); /* Not today or hh:mm will be 00:00 */
|
|
refresh_max_date = 1;
|
|
disable_buttons.push(2); /* Tomorrow */
|
|
}
|
|
if( $(input).data("flatpickr-pastdate") === true ) {
|
|
options['maxDate'] = new Date().fp_incr(-1).setHours(23, 59, 00, 00);
|
|
disable_buttons.push(1); /* Today */
|
|
disable_buttons.push(2); /* Tomorrow */
|
|
}
|
|
if ( $(input).data('flatpickr-enable-time') === true ) {
|
|
options['enableTime'] = true;
|
|
options['dateFormat'] = "Y-m-d H:i";
|
|
options['altFormat'] = flatpickr_dateformat_string + ", " + flatpickr_timeformat_string;
|
|
}
|
|
if ( $(input).data('flatpickr-disable-shortcuts') === true ) {
|
|
options['plugins'] = [];
|
|
}
|
|
let maxDate = $(input).data("flatpickr-maxdate");
|
|
if( typeof maxDate !== 'undefined' ) {
|
|
options['maxDate'] = new Date(maxDate);
|
|
}
|
|
if( $(input).data("flatpickr-time-only") === true ) {
|
|
options['enableTime'] = true;
|
|
options['noCalendar'] = true;
|
|
options['dateFormat'] = "H:i";
|
|
options['defaultHour'] = "0";
|
|
options['defaultMinute'] = "0";
|
|
options['altFormat'] = flatpickr_timeformat_string;
|
|
options['plugins'] = [];
|
|
}
|
|
|
|
let fp = $(input).flatpickr(options);
|
|
|
|
$(disable_buttons).each(function(index, value){
|
|
$(fp.calendarContainer).find(".shortcut-buttons-flatpickr-button[data-index='"+value+"']").prop("disabled", "disabled");
|
|
});
|
|
|
|
if ( refresh_max_date ) {
|
|
/* Refresh the maxDate every 30 secondes to make sure the user will not
|
|
be stuck with the minute passed.
|
|
Adding 1 minute to not introduce a gap.
|
|
Example: last update at 40s, a new minute passed at 00.
|
|
Between 00 and 10s the user won't be able click 'Today'.
|
|
*/
|
|
setInterval(() => {
|
|
let now = new Date();
|
|
fp.set("maxDate", now.setMinutes(now.getMinutes() + 1));
|
|
}, 30000);
|
|
}
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
$(".flatpickr").each(function(){
|
|
apply_flatpickr(this);
|
|
});
|
|
});
|
|
</script>
|
|
[% END %]
|