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