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 <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"></i>',
  44         prevArrow: '<i class="fa fa-fw fa-arrow-left"></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             $(instance.input)
  52                 /* Add a wrapper element so that we can prevent the clear button from wrapping */
  53                 .wrap("<span class='flatpickr_wrapper'></span>")
  54                 .attr("autocomplete", "off")
  55                 .after( $("<a/>")
  56                     .attr("href","#")
  57                     .addClass("clear_date")
  58                     .on("click", function(e){
  59                         e.preventDefault();
  60                         instance.clear();
  61                     })
  62                     .addClass("fa fa-fw fa-remove")
  63                     .attr("aria-hidden", true)
  64                     .attr("aria-label", _("Clear date") )
  65                 ).keydown(function(e) {
  66                     var key = (event.keyCode ? event.keyCode : event.which);
  67                     if ( key == 40 ) {
  68                         instance.set('allowInput',false);
  69                     }
  70                 });
  71         },
  72         onClose: function( selectedDates, dateText, instance) {
  73             validate_date( dateText, instance );
  74             var thisInput = instance.input;
  75             if ( thisInput.hasAttribute('data-date_to') ) {
  76                 var endPicker = document.querySelector("#"+thisInput.dataset.date_to)._flatpickr;
  77                 endPicker.set('minDate', selectedDates[0]);
  78             }
  79         },
  80     });
  81     $(document).ready(function(){
  82         $(".flatpickr").each(function(){
  83             let options = {};
  84
  85             if( $(this).hasClass("futuredate") ) {
  86                 options['minDate'] = new Date().fp_incr(1);
  87                 options['allowInvalidPreload'] = true;
  88             }
  89             if( $(this).hasClass("pastdate") ) {
  90                 options['maxDate'] = new Date().fp_incr(-1);
  91             }
  92             $(this).flatpickr(options);
  93         });
  94     });
  95 </script>
  96 [% END %]