[% FILTER collapse %]
<script>
var debug = "[% debug | html %]";
- var dateformat_pref = "[% Koha.Preference('dateformat ') | html %]";
- var dateformat_string = [% IF ( dateformat == "us" ) %]"mm/dd/yy"[% ELSIF ( dateformat == "metric" ) %]"dd/mm/yy"[% ELSIF ( dateformat == "dmydot" ) %]"dd.mm.yy"[% ELSE %]"yy-mm-dd"[% END %];
- var flatpickr_dateformat_string = [% IF ( dateformat == "us" ) %]"m/d/Y"[% ELSIF ( dateformat == "metric" ) %]"d/m/Y"[% ELSIF ( dateformat == "dmydot" ) %]"d.m.Y"[% ELSE %]"Y-m-d"[% END %];
+ var dateformat_pref = "[% Koha.Preference('dateformat') | html %]";
+ var 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";
+ }
var sentmsg = 0;
var bidi = [% IF(bidi) %] true[% ELSE %] false[% END %];
var calendarFirstDayOfWeek = '[% Koha.Preference('CalendarFirstDayOfWeek') | html %]';
<!-- / 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 %]
<script>
flatpickr.l10ns.default.weekdays = flatpickr_weekdays;
flatpickr.l10ns.default.months = flatpickr_months;
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 flatpickr instance is created, automatically append a "clear date" link */
- if( $(instance.input).hasClass("futuredate") ){
- instance.set("minDate", new Date().fp_incr(1));
- }
$(instance.input)
/* Add a wrapper element so that we can prevent the clear button from wrapping */
.wrap("<span class='flatpickr_wrapper'></span>")
+ .attr("autocomplete", "off")
.after( $("<a/>")
.attr("href","#")
.addClass("clear_date")
});
},
onClose: function( selectedDates, dateText, instance) {
- validate_date( selectedDates, 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);
+ }
+ })
+ ]
});
$(document).ready(function(){
- $(".flatpickr").flatpickr();
- var startPicker = $(".flatpickrfrom").flatpickr({
- onClose: function( selectedDates, dateText, instance) {
- validate_date( selectedDates, instance );
- endPicker.set('minDate', selectedDates[0]);
+ $(".flatpickr").each(function(){
+ let options = {};
+ let refresh_max_date = 0;
+ let disable_buttons = [];
+
+ if( $(this).data("flatpickr-futuredate") === true ) {
+ let original_date = $(this).val();
+ if ( original_date ) {
+ original_date = Date_from_syspref( original_date ).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 {
+ options['minDate'] = new Date().fp_incr(1);
+ }
+ disable_buttons.push(0); /* Yesterday */
+ 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);
+ 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;
}
- });
- var endPicker = $(".flatpickrto").flatpickr({
- onClose: function( selectedDates, dateText, instance) {
- validate_date( selectedDates, instance );
- },
- });
+ 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>
[% END %]