Bug 28937: Use Flatpickr on circulation and patron pages
[koha-ffzg.git] / 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 = [% IF ( dateformat == "us" ) %]"mm/dd/yy"[% ELSIF ( dateformat == "metric" ) %]"dd/mm/yy"[% ELSIF ( dateformat == "dmydot" ) %]"dd.mm.yy"[% ELSE %]"yy-mm-dd"[% END %];
10     var flatpickr_dateformat_string = [% IF ( dateformat == "us" ) %]"m/d/Y"[% ELSIF ( dateformat == "metric" ) %]"d/m/Y"[% ELSIF ( dateformat == "dmydot" ) %]"d.m.Y"[% ELSE %]"Y-m-d"[% END %];
11     var sentmsg = 0;
12     var bidi = [% IF(bidi) %] true[% ELSE %] false[% END %];
13     var calendarFirstDayOfWeek = '[% Koha.Preference('CalendarFirstDayOfWeek') | html %]';
14     var flatpickr_timeformat_string = [% IF Koha.Preference('TimeFormat') == '12hr' %]"G:i K"[% ELSE %]"H:i"[% END %];
15     var flatpickr_timeformat = [% IF Koha.Preference('TimeFormat') == '12hr' %]false[% ELSE %]true[% END %];
16 </script>
17 <!-- / calendar.inc -->
18 [% Asset.js("js/calendar.js") | $raw %]
19 [% Asset.js("lib/flatpickr/flatpickr.min.js") | $raw %]
20 <script>
21     flatpickr.l10ns.default.weekdays = flatpickr_weekdays;
22     flatpickr.l10ns.default.months   = flatpickr_months;
23     flatpickr.setDefaults({
24         allowInput: true,
25         dateFormat: flatpickr_dateformat_string,
26         nextArrow: '<i class="fa fa-fw fa-arrow-right"></i>',
27         prevArrow: '<i class="fa fa-fw fa-arrow-left"></i>',
28         time_24hr: flatpickr_timeformat,
29         locale: {
30             "firstDayOfWeek": calendarFirstDayOfWeek
31         },
32         onReady: function( selectedDates, dateStr, instance ){
33             /* When flatpickr instance is created, automatically append a "clear date" link */
34             if( $(instance.input).hasClass("futuredate") ){
35                 instance.set("minDate", new Date().fp_incr(1));
36             }
37             $(instance.input)
38                 /* Add a wrapper element so that we can prevent the clear button from wrapping */
39                 .wrap("<span class='flatpickr_wrapper'></span>")
40                 .after( $("<a/>")
41                     .attr("href","#")
42                     .addClass("clear_date")
43                     .on("click", function(e){
44                         e.preventDefault();
45                         instance.clear();
46                     })
47                     .addClass("fa fa-fw fa-remove")
48                     .attr("aria-hidden", true)
49                     .attr("aria-label", _("Clear date") )
50                 );
51         },
52         onClose: function( selectedDates, dateText, instance) {
53             validate_date( selectedDates, instance );
54         },
55     });
56     $(document).ready(function(){
57         $(".flatpickr").flatpickr();
58         var startPicker = $(".flatpickrfrom").flatpickr({
59             onClose: function( selectedDates, dateText, instance) {
60                 validate_date( selectedDates, instance );
61                 endPicker.set('minDate', selectedDates[0]);
62             }
63         });
64         var endPicker = $(".flatpickrto").flatpickr({
65             onClose: function( selectedDates, dateText, instance) {
66                 validate_date( selectedDates, instance );
67             },
68         });
69     });
70 </script>
71 [% END %]