koha-tmpl/opac-tmpl/bootstrap/en/includes/calendar.inc

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