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               switch (index) {
 105                 case 0:
 106                   date = new Date().fp_incr(-1);
 107                   break;
 108                 case 1:
 109                   date = new Date();
 110                   break;
 111                 case 2:
 112                   date = new Date().fp_incr(1);
 113                   break;
 114               }
 115               date.setHours(23, 59, 0, 0);
 116               fp.setDate(date);
 117             }
 118           })
 119         ]
 120     });
 121     $(document).ready(function(){
 122         $(".flatpickr").each(function(){
 123             let options = {};
 124
 125             if( $(this).data("flatpickr-futuredate") === true ) {
 126                 let original_date = $(this).val();
 127                 if ( original_date ) {
 128                     original_date = Date_from_syspref( original_date ).getTime();
 129                     let tomorrow = new Date().fp_incr(1).getTime();
 130
 131                     options['enable'] = [function(date){
 132                         date = date.getTime();
 133                         if ( date == original_date ) return true;
 134                         if ( date >= tomorrow)       return true;
 135                     }];
 136                 }
 137                 else {
 138                     options['minDate'] = new Date().fp_incr(1);
 139                 }
 140             }
 141             if( $(this).data("flatpickr-pastinclusive") === true ) {
 142                 options['maxDate'] = "today";
 143             }
 144             if( $(this).data("flatpickr-pastdate") === true ) {
 145                 options['maxDate'] = new Date().fp_incr(-1);
 146             }
 147             if ( $(this).data('flatpickr-enable-time') === true ) {
 148                 options['enableTime'] = true;
 149                 options['dateFormat'] = flatpickr_dateformat_string + " " + flatpickr_timeformat_string;
 150             }
 151
 152             $(this).flatpickr(options);
 153         });
 154     });
 155 </script>
 156 [% END %]