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
 131             if( $(this).data("flatpickr-futuredate") === true ) {
 132                 let original_date = $(this).val();
 133                 if ( original_date ) {
 134                     original_date = Date_from_syspref( original_date ).getTime();
 135                     let tomorrow = new Date().fp_incr(1).getTime();
 136
 137                     options['enable'] = [function(date){
 138                         date = date.getTime();
 139                         if ( date == original_date ) return true;
 140                         if ( date >= tomorrow)       return true;
 141                     }];
 142                 }
 143                 else {
 144                     options['minDate'] = new Date().fp_incr(1);
 145                 }
 146             }
 147             if( $(this).data("flatpickr-pastinclusive") === true ) {
 148                 options['maxDate'] = new Date(); /* Not today or hh:mm will be 00:00 */
 149                 refresh_max_date = 1;
 150             }
 151             if( $(this).data("flatpickr-pastdate") === true ) {
 152                 options['maxDate'] = new Date().fp_incr(-1);
 153             }
 154             if ( $(this).data('flatpickr-enable-time') === true ) {
 155                 options['enableTime'] = true;
 156                 options['dateFormat'] = flatpickr_dateformat_string + " " + flatpickr_timeformat_string;
 157             }
 158
 159             let fp = $(this).flatpickr(options);
 160             if ( refresh_max_date ) {
 161                 /* Refresh the maxDate every 30 secondes to make sure the user will not
 162                    be stuck with the minute passed.
 163                    Adding 1 minute to not introduce a gap.
 164                    Example: last update at 40s, a new minute passed at 00.
 165                    Between 00 and 10s the user won't be able click 'Today'.
 166                 */
 167                 setInterval(() => {
 168                     let now = new Date();
 169                     fp.set("maxDate", now.setMinutes(now.getMinutes() + 1));
 170                 }, 30000);
 171             }
 172         });
 173     });
 174 </script>
 175 [% END %]