-<link rel="stylesheet" type="text/css" href="[% themelang %]/lib/calendar/calendar-system.css"/>
-<script type="text/javascript" src="[% themelang %]/lib/calendar/calendar.js"></script>
-<script type="text/javascript">
-// full day names
-Calendar._DN = new Array(_("Sunday"),_("Monday"),_("Tuesday"),_("Wednesday"),_("Thursday"),_("Friday"),_("Saturday"),_("Sunday"));
-// short day names
-Calendar._SDN = new Array(_("Sun"),_("Mon"),_("Tue"),_("Wed"),_("Thu"),_("Fri"),_("Sat"),_("Sun"));
-// First day of the week. "0" means display Sunday first, "1" means display
-// Monday first, etc.
-Calendar._FD = [% CalendarFirstDayOfWeek %];
-// full month names
-Calendar._MN = new Array(_("January"),_("February"),_("March"),_("April"),_("May"),_("June"),_("July"),_("August"),_("September"),_("October"),_("November"),_("December"));
-// short month names
-Calendar._SMN = new Array(_("Jan"),_("Feb"),_("Mar"),_("Apr"),_("May"),_("Jun"),_("Jul"),_("Aug"),_("Sep"),_("Oct"),_("Nov"),_("Dec"));
-// tooltips
-Calendar._TT = {};
-Calendar._TT["INFO"] = _("About the calendar");
-
-Calendar._TT["ABOUT"] =
-_("Dhtml Date/Time Selector")+"\n" +
-"(c) dynarch.com 2002-2003\n" + // don't translate this this ;-)
-_("For latest version visit: http://dynarch.com/mishoo/calendar.epl")+"\n" +
-_("Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details.") +
-"\n\n" +
-_("Date selection:")+"\n" +
-_("- Use the \xab, \xbb buttons to select year")+"\n" +
-_("- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month")+"\n" +
-_("- Hold mouse button on any of the above buttons for faster selection.");
-Calendar._TT["ABOUT_TIME"] = "\n\n" +
-_("Time selection:")+"\n" +
-_("- Click on any of the time parts to increase it")+"\n" +
-_("- or Shift-click to decrease it")+"\n" +
-_("- or click and drag for faster selection.");
-
-Calendar._TT["PREV_YEAR"] = _("Prev. year (hold for menu)");
-Calendar._TT["PREV_MONTH"] = _("Prev. month (hold for menu)");
-Calendar._TT["GO_TODAY"] = _("Go to Today");
-Calendar._TT["NEXT_MONTH"] = _("Next month (hold for menu)");
-Calendar._TT["NEXT_YEAR"] = _("Next year (hold for menu)");
-Calendar._TT["SEL_DATE"] = _("Select date");
-Calendar._TT["DRAG_TO_MOVE"] = _("Drag to move");
-Calendar._TT["PART_TODAY"] = _(" (today)");
-
-// the following is to inform that "%s" is to be the first day of week
-// %s will be replaced with the day name.
-Calendar._TT["DAY_FIRST"] = _("Display %s first");
+[% USE Asset %]
+[% USE Koha %]
+[% USE raw %]
+<!-- calendar.inc -->
+[% FILTER collapse %]
+<script>
+ var debug = "[% debug | html %]";
+ var dateformat_pref = "[% Koha.Preference('dateformat') | html %]";
+ var flatpickr_dateformat_string = "";
+ switch ( dateformat_pref ){
+ case "us":
+ flatpickr_dateformat_string = "m/d/Y";
+ break;
+ case "metric":
+ flatpickr_dateformat_string = "d/m/Y";
+ break;
+ case "dmydot":
+ flatpickr_dateformat_string = "d.m.Y";
+ break;
+ default:
+ flatpickr_dateformat_string = "Y-m-d";
+ }
+ var sentmsg = 0;
+ var bidi = [% IF(bidi) %] true[% ELSE %] false[% END %];
+ var calendarFirstDayOfWeek = '[% Koha.Preference('CalendarFirstDayOfWeek') | html %]';
+ var flatpickr_timeformat_string = [% IF Koha.Preference('TimeFormat') == '12hr' %]"G:i K"[% ELSE %]"H:i"[% END %];
+ var flatpickr_timeformat = [% IF Koha.Preference('TimeFormat') == '12hr' %]false[% ELSE %]true[% END %];
+</script>
+<!-- / calendar.inc -->
+[% Asset.js("js/calendar.js") | $raw %]
+[% Asset.js("lib/flatpickr/flatpickr.min.js") | $raw %]
+[% Asset.js("lib/flatpickr/shortcut-buttons-flatpickr.min.js") | $raw %]
+<script>
+ flatpickr.l10ns.default.weekdays = flatpickr_weekdays;
+ flatpickr.l10ns.default.months = flatpickr_months;
+ flatpickr.setDefaults({
+ allowInput: true,
+ dateFormat: flatpickr_dateformat_string,
+ nextArrow: '<i class="fa fa-fw fa-arrow-right"></i>',
+ prevArrow: '<i class="fa fa-fw fa-arrow-left"></i>',
+ time_24hr: flatpickr_timeformat,
+ defaultHour: 23,
+ defaultMinute: 59,
+ locale: {
+ "firstDayOfWeek": calendarFirstDayOfWeek
+ },
+ onReady: function( selectedDates, dateStr, instance ){
+ /* When flatpickr instance is created, automatically append a "clear date" link */
+ $(instance.input)
+ /* Add a wrapper element so that we can prevent the clear button from wrapping */
+ .wrap("<span class='flatpickr_wrapper'></span>")
+ .attr("autocomplete", "off")
+ .after( $("<a/>")
+ .attr("href","#")
+ .addClass("clear_date")
+ .on("click", function(e){
+ e.preventDefault();
+ instance.clear();
+ })
+ .addClass("fa fa-fw fa-remove")
+ .attr("aria-hidden", true)
+ .attr("aria-label", _("Clear date") )
+ ).keydown(function(e) {
+ var key = (event.keyCode ? event.keyCode : event.which);
+ if ( key == 40 ) {
+ instance.set('allowInput',false);
+ }
+ });
+ },
+ onClose: function( selectedDates, dateText, instance) {
+ validate_date( dateText, instance );
+ var thisInput = instance.input;
+ if ( thisInput.hasAttribute('data-date_to') ) {
+ var endPicker = document.querySelector("#"+thisInput.dataset.date_to)._flatpickr;
+ endPicker.set('minDate', selectedDates[0]);
+ }
-// This may be locale-dependent. It specifies the week-end days, as an array
-// of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1
-// means Monday, etc.
-Calendar._TT["WEEKEND"] = "0,6";
+ let = on_close_focus = $(thisInput).data('flatpickr-on-close-focus');
+ if ( on_close_focus ) {
+ $(on_close_focus).focus();
+ }
+ },
+ plugins: [
+ ShortcutButtonsPlugin({
+ button: [
+ {
+ label: _("Yesterday")
+ },
+ {
+ label: _("Today")
+ },
+ {
+ label: _("Tomorrow")
+ }
+ ],
+ label: _("or"),
+ onClick: (index, fp) => {
+ let date;
+ let hh = 23, mm = 59;
+ switch (index) {
+ case 0:
+ date = new Date().fp_incr(-1);
+ break;
+ case 1:
+ date = new Date();
+ if ( $(fp.input).data("flatpickr-pastinclusive") === true ) {
+ hh = date.getHours();
+ mm = date.getMinutes();
+ }
+ break;
+ case 2:
+ date = new Date().fp_incr(1);
+ break;
+ }
+ date.setHours(hh, mm, 0, 0);
+ fp.setDate(date);
+ }
+ })
+ ]
+ });
+ $(document).ready(function(){
+ $(".flatpickr").each(function(){
+ let options = {};
+ let refresh_max_date = 0;
+ let disable_buttons = [];
-Calendar._TT["CLOSE"] = _("Close");
-Calendar._TT["TODAY"] = _("Today");
-Calendar._TT["TIME_PART"] = _("(Shift-)Click or drag to change value");
+ if( $(this).data("flatpickr-futuredate") === true ) {
+ let original_date = $(this).val();
+ if ( original_date ) {
+ original_date = Date_from_syspref( original_date ).getTime();
+ let tomorrow = new Date().fp_incr(1).getTime();
-// date formats
-Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d";
-Calendar._TT["TT_DATE_FORMAT"] = "%a, %b %e";
+ options['enable'] = [function(date){
+ date = date.getTime();
+ if ( date == original_date ) return true;
+ if ( date >= tomorrow) return true;
+ }];
+ }
+ else {
+ options['minDate'] = new Date().fp_incr(1);
+ }
+ disable_buttons.push(0); /* Yesterday */
+ disable_buttons.push(1); /* Today */
+ }
+ if( $(this).data("flatpickr-pastinclusive") === true ) {
+ options['maxDate'] = new Date(); /* Not today or hh:mm will be 00:00 */
+ refresh_max_date = 1;
+ disable_buttons.push(2); /* Tomorrow */
+ }
+ if( $(this).data("flatpickr-pastdate") === true ) {
+ options['maxDate'] = new Date().fp_incr(-1);
+ disable_buttons.push(1); /* Today */
+ disable_buttons.push(2); /* Tomorrow */
+ }
+ if ( $(this).data('flatpickr-enable-time') === true ) {
+ options['enableTime'] = true;
+ options['dateFormat'] = flatpickr_dateformat_string + " " + flatpickr_timeformat_string;
+ }
-Calendar._TT["WK"] = _("wk");
-Calendar._TT["TIME"] = _("Time:");
-</script>
-<script type="text/javascript" src="[% themelang %]/lib/calendar/calendar-setup.js"></script>
-<script type="text/javascript">
-//<![CDATA[
-var debug = "[% debug %]";
-var dformat = "[% dateformat %]";
-var sentmsg = 0;
-if (debug > 1) {alert("dateformat: " + dformat + "\ndebug is on (level " + debug + ")");}
+ let fp = $(this).flatpickr(options);
-function Date_from_syspref(dstring) {
- var dateX = dstring.split(/[-/]/);
- if (debug > 1 && sentmsg < 1) {sentmsg++; alert("Date_from_syspref(" + dstring + ") splits to:\n" + dateX.join("\n"));}
- if (dformat === "iso") {
- return new Date(dateX[0], (dateX[1] - 1), dateX[2]); // YYYY-MM-DD to (YYYY,m(0-11),d)
- } else if (dformat === "us") {
- return new Date(dateX[2], (dateX[0] - 1), dateX[1]); // MM/DD/YYYY to (YYYY,m(0-11),d)
- } else if (dformat === "metric") {
- return new Date(dateX[2], (dateX[1] - 1), dateX[0]); // DD/MM/YYYY to (YYYY,m(0-11),d)
- } else {
- if (debug > 0) {alert("KOHA ERROR - Unrecognized date format: " +dformat);}
- return 0;
- }
-}
+ $(disable_buttons).each(function(index, value){
+ $(fp.calendarContainer).find(".shortcut-buttons-flatpickr-button[data-index='"+value+"']").prop("disabled", "disabled");
+ });
-function get_Calendar_limit (date,did) {
- // this function could be moved to a static calendar-extras.js file
- var dvalue = document.getElementById(did).value;
- if (dvalue == "") { return false; }
- var limitDate = Date_from_syspref(dvalue);
- if (debug && debug > 5) {
- var month = date.getMonth() + 1;
- var dateString = date.getFullYear() + '-' + month + '-' + date.getDate();
- alert("Comparing incoming (" + dateString + ") vs "
- + "'" + did + "' limit\n"
- + "\n thisdate: " + date
- + "\nlimitdate: " + limitDate
- + "\nlimit > thisdate : " + (limitDate > date)
- + "\nlimit < thisdate : " + (limitDate < date)
- );
- }
- return limitDate;
-}
-//]]>
+ if ( refresh_max_date ) {
+ /* Refresh the maxDate every 30 secondes to make sure the user will not
+ be stuck with the minute passed.
+ Adding 1 minute to not introduce a gap.
+ Example: last update at 40s, a new minute passed at 00.
+ Between 00 and 10s the user won't be able click 'Today'.
+ */
+ setInterval(() => {
+ let now = new Date();
+ fp.set("maxDate", now.setMinutes(now.getMinutes() + 1));
+ }, 30000);
+ }
+ });
+ });
</script>
+[% END %]
projects / koha-ffzg.git / blobdiff