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