235 lines
9.5 KiB
PHP
235 lines
9.5 KiB
PHP
[% USE Asset %]
|
|
[% USE Koha %]
|
|
[% USE raw %]
|
|
<script nonce="[% Koha.CSPNonce | $raw %]">
|
|
var flatpickr_weekdays = {
|
|
shorthand: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
|
longhand: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]
|
|
};
|
|
|
|
var flatpickr_months = {
|
|
shorthand: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
longhand: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
|
|
};
|
|
var debug = "[% debug | html %]";
|
|
var dateformat_pref = "[% Koha.Preference('dateformat') | html %]";
|
|
var sentmsg = 0;
|
|
if (debug > 1) {alert("dateformat: " + dateformat_pref + "\ndebug is on (level " + debug + ")");}
|
|
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 %];
|
|
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 = "-";
|
|
}
|
|
|
|
function get_dateformat_str(dateformat) {
|
|
var dateformat_str;
|
|
if (dateformat == 'us') {
|
|
dateformat_str = 'mm/dd/yyyy';
|
|
} else if (dateformat == 'metric') {
|
|
dateformat_str = 'dd/mm/yyyy';
|
|
} else if (dateformat == 'iso') {
|
|
dateformat_str = 'yyyy-mm-dd';
|
|
} else if (dateformat == 'dmydot') {
|
|
dateformat_str = 'dd.mm.yyyy';
|
|
}
|
|
return dateformat_str;
|
|
}
|
|
</script>
|
|
[% Asset.js("lib/flatpickr/flatpickr.min.js") | $raw %]
|
|
[% Asset.js("lib/maskito/maskito.core.js") | $raw %]
|
|
[% Asset.js("lib/maskito/maskito.kit.js") | $raw %]
|
|
<script nonce="[% Koha.CSPNonce | $raw %]">
|
|
flatpickr.l10ns.default.weekdays = flatpickr_weekdays;
|
|
flatpickr.l10ns.default.months = flatpickr_months;
|
|
flatpickr.setDefaults({
|
|
dateFormat: "Y-m-d",
|
|
altInput: true,
|
|
allowInput: true,
|
|
altFormat: flatpickr_dateformat_string,
|
|
altInputClass: "flatpickr-input",
|
|
nextArrow: '<i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i>',
|
|
prevArrow: '<i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i>',
|
|
time_24hr: flatpickr_timeformat,
|
|
locale: {
|
|
firstDayOfWeek: calendarFirstDayOfWeek,
|
|
},
|
|
onReady: function (selectedDates, dateStr, instance) {
|
|
/* When flatpickr instance is created, automatically append a "clear date" link */
|
|
if ($(instance.input).hasClass("futuredate")) {
|
|
instance.set("minDate", new Date().fp_incr(1));
|
|
}
|
|
if ($(instance.input).hasClass("pastdate")) {
|
|
instance.set("maxDate", new Date().fp_incr(-1));
|
|
}
|
|
$(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'></span>")
|
|
.after(
|
|
$("<a/>")
|
|
.attr("href", "#")
|
|
.addClass("clear_date")
|
|
.on("click", function (e) {
|
|
e.preventDefault();
|
|
instance.clear();
|
|
})
|
|
.addClass("fa fa-fw fa-times")
|
|
.attr("aria-hidden", false)
|
|
.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 options = maskitoDateOptionsGenerator({
|
|
mode: altinput_dateformat,
|
|
separator: delimiter,
|
|
overwriteMode: "replace",
|
|
});
|
|
|
|
new Maskito(instance.altInput, options);
|
|
},
|
|
onClose: function (selectedDates, dateText, instance) {
|
|
validate_date(dateText, instance);
|
|
var thisInput = instance.input;
|
|
if (thisInput.hasAttribute("data-start_for")) {
|
|
var endPicker = document.querySelector("#" + thisInput.dataset.start_for)._flatpickr;
|
|
endPicker.set("minDate", selectedDates[0]);
|
|
}
|
|
},
|
|
});
|
|
|
|
var MSG_PLEASE_ENTER_A_VALID_DATE = _("Please enter a valid date (should match %s).");
|
|
|
|
function is_valid_date(date) {
|
|
// An empty string is considered as a valid date for convenient reasons.
|
|
if (date === "") return 1;
|
|
var dateformat = flatpickr_dateformat_string;
|
|
switch (dateformat_pref) {
|
|
case "us":
|
|
flatpickr_dateformat_string = "m/d/Y";
|
|
break;
|
|
case "metric":
|
|
flatpickr_dateformat_string = "d/m/Y";
|
|
break;
|
|
case "dmydot":
|
|
flatpickr_dateformat_string = "d.m.Y";
|
|
break;
|
|
default:
|
|
flatpickr_dateformat_string = "Y-m-d";
|
|
}
|
|
try {
|
|
flatpickr.parseDate(date, dateformat);
|
|
} catch (e) {
|
|
return 0;
|
|
}
|
|
return 1;
|
|
}
|
|
|
|
function validate_date(dateText, inst) {
|
|
if (!is_valid_date(dateText)) {
|
|
var dateformat_str = get_dateformat_str(dateformat_pref);
|
|
alert(MSG_PLEASE_ENTER_A_VALID_DATE.format(dateformat_str));
|
|
inst.clear();
|
|
}
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$(".flatpickr").each(function () {
|
|
let options = {};
|
|
let refresh_max_date = 0;
|
|
let disable_buttons = [];
|
|
|
|
if ($(this).data("flatpickr-futureinclusive") === true || $(this).data("flatpickr-futuredate") === true) {
|
|
let original_date = $(this).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 ($(this).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 ($(this).data("flatpickr-futuredate") === true) {
|
|
disable_buttons.push(1); /* Today */
|
|
}
|
|
}
|
|
if ($(this).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 ($(this).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 ($(this).data("flatpickr-enable-time") === true) {
|
|
options["enableTime"] = true;
|
|
options["dateFormat"] = flatpickr_dateformat_string + " " + flatpickr_timeformat_string;
|
|
}
|
|
|
|
let fp = $(this).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);
|
|
}
|
|
});
|
|
});
|
|
</script>
|