koha-dev.rot13.org Git - srvgit/blob - 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 </script>
  36 [% Asset.js("lib/flatpickr/flatpickr.min.js") | $raw %]
  37 <script>
  38     flatpickr.l10ns.default.weekdays = flatpickr_weekdays;
  39     flatpickr.l10ns.default.months   = flatpickr_months;
  40     flatpickr.setDefaults({
  41         allowInput: true,
  42         dateFormat: flatpickr_dateformat_string,
  43         nextArrow: '<i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i>',
  44         prevArrow: '<i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i>',
  45         time_24hr: flatpickr_timeformat,
  46         locale: {
  47             "firstDayOfWeek": calendarFirstDayOfWeek
  48         },
  49         onReady: function( selectedDates, dateStr, instance ){
  50             /* When flatpickr instance is created, automatically append a "clear date" link */
  51             if( $(instance.input).hasClass("futuredate") ){
  52                 instance.set("minDate", new Date().fp_incr(1));
  53             }
  54             if( $(instance.input).hasClass("pastdate") ){
  55                 instance.set("maxDate", new Date().fp_incr(-1));
  56             }
  57             $(instance.input)
  58                 /* Add a wrapper element so that we can prevent the clear button from wrapping */
  59                 .wrap("<span class='flatpickr_wrapper'></span>")
  60                 .after( $("<a/>")
  61                     .attr("href","#")
  62                     .addClass("clear_date")
  63                     .on("click", function(e){
  64                         e.preventDefault();
  65                         instance.clear();
  66                     })
  67                     .addClass("fa fa-fw fa-remove")
  68                     .attr("aria-hidden", true)
  69                     .attr("aria-label", _("Clear date") )
  70                 ).keydown(function(e) {
  71                     var key = (event.keyCode ? event.keyCode : event.which);
  72                     if ( key == 40 ) {
  73                         instance.set('allowInput',false);
  74                     }
  75                 });
  76         },
  77         onClose: function( selectedDates, dateText, instance) {
  78             validate_date( dateText, instance );
  79             var thisInput = instance.input;
  80             if ( thisInput.hasAttribute('data-start_for') ) {
  81                 var endPicker = document.querySelector("#"+thisInput.dataset.start_for)._flatpickr;
  82                 endPicker.set('minDate', selectedDates[0]);
  83             }
  84         },
  85     });
  86
  87     var MSG_PLEASE_ENTER_A_VALID_DATE = ( __("Please enter a valid date (should match %s).") );
  88
  89     function is_valid_date(date) {
  90         // An empty string is considered as a valid date for convenient reasons.
  91         if (date === '') return 1;
  92         var dateformat = flatpickr_dateformat_string;
  93         switch ( dateformat_pref ){
  94             case "us":
  95                 flatpickr_dateformat_string = "m/d/Y";
  96                 break;
  97             case "metric":
  98                 flatpickr_dateformat_string = "d/m/Y";
  99                 break;
 100             case "dmydot":
 101                 flatpickr_dateformat_string = "d.m.Y";
 102                 break;
 103             default:
 104                 flatpickr_dateformat_string = "Y-m-d";
 105         }
 106         try {
 107             flatpickr.parseDate(date, dateformat);
 108         } catch (e) {
 109             return 0;
 110         }
 111         return 1;
 112     }
 113
 114     function validate_date(dateText, inst) {
 115         if (!is_valid_date(dateText)) {
 116             var dateformat_str = get_dateformat_str( dateformat_pref );
 117             alert(MSG_PLEASE_ENTER_A_VALID_DATE.format(dateformat_str));
 118             inst.clear();
 119         }
 120     }
 121
 122         $(document).ready(function(){
 123             $(".flatpickr").flatpickr();
 124
 125             $(".clear-flatpickr").on("click", function(e){
 126                 e.preventDefault();
 127                 var element = $(this).data("fp");
 128                 if( element ){
 129                     document.querySelector("#" + element )._flatpickr.clear();
 130                 }
 131             });
 132         });
 133
 134 </script>