koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc

   1 [% USE Asset %]
   2 [% USE Koha %]
   3 [% USE raw %]
   4 <!-- calendar.inc -->
   5 [% FILTER collapse %]
   6 <script>
   7     var debug    = "[% debug | html %]";
   8     var dateformat_pref = "[% Koha.Preference('dateformat') | html %]";
   9     var flatpickr_dateformat_string = "";
  10     switch ( dateformat_pref ){
  11         case "us":
  12             flatpickr_dateformat_string = "m/d/Y";
  13             break;
  14         case "metric":
  15             flatpickr_dateformat_string = "d/m/Y";
  16             break;
  17         case "dmydot":
  18             flatpickr_dateformat_string = "d.m.Y";
  19             break;
  20         default:
  21             flatpickr_dateformat_string = "Y-m-d";
  22     }
  23     var sentmsg = 0;
  24     var bidi = [% IF(bidi) %] true[% ELSE %] false[% END %];
  25     var calendarFirstDayOfWeek = '[% Koha.Preference('CalendarFirstDayOfWeek') | html %]';
  26     var flatpickr_timeformat_string = [% IF Koha.Preference('TimeFormat') == '12hr' %]"G:i K"[% ELSE %]"H:i"[% END %];
  27     var flatpickr_timeformat = [% IF Koha.Preference('TimeFormat') == '12hr' %]false[% ELSE %]true[% END %];
  28 </script>
  29 <!-- / calendar.inc -->
  30 [% Asset.js("js/calendar.js") | $raw %]
  31 [% Asset.js("lib/flatpickr/flatpickr.min.js") | $raw %]
  32 [% Asset.js("lib/flatpickr/shortcut-buttons-flatpickr.min.js") | $raw %]
  33 <script>
  34     flatpickr.l10ns.default.weekdays = flatpickr_weekdays;
  35     flatpickr.l10ns.default.months   = flatpickr_months;
  36     let flatpickr_defaults = {
  37         allowInput: true,
  38         dateFormat: "Y-m-d",
  39         altInput: true,
  40         altFormat: flatpickr_dateformat_string,
  41         altInputClass: 'flatpickr-input',
  42         nextArrow: '<i class="fa fa-fw fa-arrow-right"></i>',
  43         prevArrow: '<i class="fa fa-fw fa-arrow-left"></i>',
  44         time_24hr: flatpickr_timeformat,
  45         defaultHour: 23,
  46         defaultMinute: 59,
  47         locale: {
  48             "firstDayOfWeek": calendarFirstDayOfWeek
  49         },
  50         onReady: function( selectedDates, dateStr, instance ){
  51             /* When flatpickr instance is created, automatically append a "clear date" link */
  52             $(instance.input).find('~input.flatpickr:first')
  53                 /* Add a wrapper element so that we can prevent the clear button from wrapping */
  54                 .wrap("<span class='flatpickr_wrapper'></span>")
  55                 .attr("autocomplete", "off")
  56                 .after( $("<a/>")
  57                     .attr("href","#")
  58                     .addClass("clear_date")
  59                     .on("click", function(e){
  60                         e.preventDefault();
  61                         instance.clear();
  62                     })
  63                     .addClass("fa fa-fw fa-times")
  64                     .attr("aria-hidden", true)
  65                     .attr("aria-label", _("Clear date") )
  66                 ).keydown(function(e) {
  67                     var key = (event.keyCode ? event.keyCode : event.which);
  68                     if ( key == 40 ) {
  69                         instance.set('allowInput',false);
  70                     }
  71                 });
  72         },
  73         onChange: function( selectedDates, dateText, instance) {
  74             var thisInput = instance.input;
  75             let = accepts_time = $(thisInput).data('flatpickr-enable-time');
  76             if ( accepts_time ) {
  77                 let parsedDate = flatpickr.parseDate(dateText, instance.config.dateFormat);
  78                 if ( !parsedDate.getHours() ) {
  79                     instance.setDate(selectedDates[0].setHours(23, 59, 0, 0));
  80                 }
  81             }
  82         },
  83         onClose: function( selectedDates, dateText, instance) {
  84             validate_date( dateText, instance );
  85             var thisInput = instance.input;
  86             if ( thisInput.hasAttribute('data-date_to') ) {
  87                 var endPicker = document.querySelector("#"+thisInput.dataset.date_to)._flatpickr;
  88                 endPicker.set('minDate', selectedDates[0]);
  89             }
  90
  91             let = on_close_focus = $(thisInput).data('flatpickr-on-close-focus');
  92             if ( on_close_focus ) {
  93                 $(on_close_focus).focus();
  94             }
  95         },
  96         plugins: [
  97           ShortcutButtonsPlugin({
  98             button: [
  99               {
 100                 label: _("Yesterday")
 101               },
 102               {
 103                 label: _("Today")
 104               },
 105               {
 106                 label: _("Tomorrow")
 107               }
 108             ],
 109             label: _("or"),
 110             onClick: (index, fp) => {
 111               let date;
 112               let hh = 23, mm = 59;
 113               switch (index) {
 114                 case 0:
 115                   date = new Date().fp_incr(-1);
 116                   break;
 117                 case 1:
 118                   date = new Date();
 119                   if ( $(fp.input).data("flatpickr-pastinclusive") === true ) {
 120                     hh = date.getHours();
 121                     mm = date.getMinutes();
 122                   }
 123                   break;
 124                 case 2:
 125                   date = new Date().fp_incr(1);
 126                   break;
 127               }
 128               date.setHours(hh, mm, 0, 0);
 129               fp.setDate(date);
 130             }
 131           })
 132         ]
 133     };
 134
 135     flatpickr.setDefaults(flatpickr_defaults);
 136
 137     function apply_flatpickr(input){
 138         let options = {};
 139         let refresh_max_date = 0;
 140         let disable_buttons = [];
 141
 142         if( $(input).data("flatpickr-futureinclusive") === true
 143          || $(input).data("flatpickr-futuredate") === true ) {
 144             let original_date = $(input).val();
 145             if ( original_date ) {
 146                 original_date = Date_from_syspref( original_date ).getTime();
 147                 let tomorrow = new Date().fp_incr(1).getTime();
 148
 149                 options['enable'] = [function(date){
 150                     date = date.getTime();
 151                     if ( date == original_date ) return true;
 152                     if ( date >= tomorrow)       return true;
 153                 }];
 154             }
 155             else {
 156                 if( $(input).data("flatpickr-futureinclusive") === true ) {
 157                     options['minDate'] = new Date().setHours(00, 00, 00, 00);
 158                 } else {
 159                     options['minDate'] = new Date().fp_incr(1);
 160                 }
 161             }
 162
 163             disable_buttons.push(0); /* Yesterday */
 164
 165             if ( $(input).data("flatpickr-futuredate") === true ) {
 166                 disable_buttons.push(1); /* Today */
 167             }
 168         }
 169         if( $(input).data("flatpickr-pastinclusive") === true ) {
 170             options['maxDate'] = new Date(); /* Not today or hh:mm will be 00:00 */
 171             refresh_max_date = 1;
 172             disable_buttons.push(2); /* Tomorrow */
 173         }
 174         if( $(input).data("flatpickr-pastdate") === true ) {
 175             options['maxDate'] = new Date().fp_incr(-1).setHours(23, 59, 00, 00);
 176             disable_buttons.push(1); /* Today */
 177             disable_buttons.push(2); /* Tomorrow */
 178         }
 179         if ( $(input).data('flatpickr-enable-time') === true ) {
 180             options['enableTime'] = true;
 181             options['dateFormat'] = "Y-m-d H:i";
 182             options['altFormat'] = flatpickr_dateformat_string + " " + flatpickr_timeformat_string;
 183         }
 184         if ( $(input).data('flatpickr-disable-shortcuts') === true ) {
 185             options['plugins'] = [];
 186         }
 187
 188         let fp = $(input).flatpickr(options);
 189
 190         $(disable_buttons).each(function(index, value){
 191             $(fp.calendarContainer).find(".shortcut-buttons-flatpickr-button[data-index='"+value+"']").prop("disabled", "disabled");
 192         });
 193
 194         if ( refresh_max_date ) {
 195             /* Refresh the maxDate every 30 secondes to make sure the user will not
 196                be stuck with the minute passed.
 197                Adding 1 minute to not introduce a gap.
 198                Example: last update at 40s, a new minute passed at 00.
 199                Between 00 and 10s the user won't be able click 'Today'.
 200             */
 201             setInterval(() => {
 202                 let now = new Date();
 203                 fp.set("maxDate", now.setMinutes(now.getMinutes() + 1));
 204             }, 30000);
 205         }
 206     }
 207
 208     $(document).ready(function(){
 209         $(".flatpickr").each(function(){
 210             apply_flatpickr(this);
 211         });
 212     });
 213 </script>
 214 [% END %]