Owen Leonard
e5f1ada249
This patch replaces the use of jQueryUI's datepicker on circulation and patron-related pages. The patch modifies Flatpickr's default configuration (in calendar.inc) so that it has the following features: - A Flatpickr input with a "futuredate" class will require that the selected date be after today. - The Flatpickr input field will be wrapped in a container to facilitate better CSS styling. - Generic handling of paired date fields is enabled using ".flatpickrfrom" and ".flatpickrto" field classes. This mimics the same feature we have for jQueryUI datepickers using ".datepickerfrom" and ".datepickerto". This patch also removes an unused function which was repeated in three templates: validate1. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Go to Circulation and check out to a patron. - Open the Restrictions tab and click "Add manual restriction." - In the "Expiration" field, test that the Flatpickr widget works correctly and limits to dates after today. - Enable the SpecifyDueDate preference if necessary. - Test the behavior of the SpecifyDueDate controls: Setting a date, clearing a date, session persistence. - Enable the SuspendHoldsIntranet system preference if necessary. - Check out to a patron with existing holds. - Open the Holds tab and click the "Suspend" button for one of the holds. - In the modal window which appears, check that the Flatpickr widget works correctly and limits to dates after today. - At the bottom of the table of holds, test that the "Suspend all holds" Flatpickr works correctly and limits to dates after today. - Perform this same test from the patron details page. - Enable the BatchCheckouts system preference if necessary. - Open a patron record and click "Batch check out" in the left-hand sidebar menu. - Test that the "Hard due date" Flatpickr works correctly as a date and time picker. - Go to Circulation -> Overdues. - Test that the date due filters in the sidebar work correctly and are linked, e.g. the "to" field cannot be before the "from" field. - Perform the same test here: Circulation -> Holds to pull; and here: Circulation -> Hold ratios. - Enable the HouseboundModule system preference if necessary. - Check out to or view details of a patron. - Click "Housebound" in the sidebar menu. - Save delivery day and frequency settings for that patron. - Click "Add a new delivery." - Test that the "Date" Flatpickr widget works correctly. - Go to Patrons -> A patron record -> Edit. - Test that Flatpickr widgets work on the following fields: - Date of birth - Registration date & Expiration date (linked). - Patron restrictions -> Add manual restriction -> Expiration. - View a bibliographic record and start the process of placing a hold. - After selecting a patron, test the "Hold starts on" and "Hold expires on" date fields. The fields should be linked and each should limit to future dates. - Confirm that the dates are saved correctly when you submit the hold. - Locate a bibliographic record with multiple holds and view the holds. - In the table of holds, test each date field: Date, expiration, and suspend-until. - Test that Flatpickr's static "formatDate" method is working correctly: - Locate a bibliographic record's item so that there is text in both the "Public note" and "Non-public note" field. - Check that item out to a patron. - After the page reloads the public and non-public notes should be shown under the checkout title highlighted in red. - Check for references to a "validate1" function. There should be none. Signed-off-by: Lucas Gass <lucas@bywatersolutions.com> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
222 lines
7.9 KiB
JavaScript
222 lines
7.9 KiB
JavaScript
/* global debug sentmsg __ dateformat_pref dateformat_string bidi calendarFirstDayOfWeek */
|
|
/* exported DateTime_from_syspref flatpickr_weekdays flatpickr_months */
|
|
var MSG_PLEASE_ENTER_A_VALID_DATE = ( __("Please enter a valid date (should match %s).") );
|
|
if (debug > 1) {
|
|
alert("dateformat: " + dateformat_pref + "\ndebug is on (level " + debug + ")");
|
|
}
|
|
|
|
function is_valid_date(date) {
|
|
// An empty string is considered as a valid date for convenient reasons.
|
|
if (date === '') return 1;
|
|
var dateformat = dateformat_string;
|
|
if (dateformat == 'us') {
|
|
if (date.search(/^\d{2}\/\d{2}\/\d{4}($|\s)/) == -1) return 0;
|
|
dateformat = 'mm/dd/yy';
|
|
} else if (dateformat == 'metric') {
|
|
if (date.search(/^\d{2}\/\d{2}\/\d{4}($|\s)/) == -1) return 0;
|
|
dateformat = 'dd/mm/yy';
|
|
} else if (dateformat == 'iso') {
|
|
if (date.search(/^\d{4}-\d{2}-\d{2}($|\s)/) == -1) return 0;
|
|
dateformat = 'yy-mm-dd';
|
|
} else if (dateformat == 'dmydot') {
|
|
if (date.search(/^\d{2}\.\d{2}\.\d{4}($|\s)/) == -1) return 0;
|
|
dateformat = 'dd.mm.yy';
|
|
}
|
|
try {
|
|
flatpickr.parseDate(date, dateformat);
|
|
} catch (e) {
|
|
return 0;
|
|
}
|
|
return 1;
|
|
}
|
|
|
|
function get_dateformat_str(dateformat) {
|
|
var dateformat_str;
|
|
if (dateformat == 'us') {
|
|
dateformat_str = 'mm/dd/yyyy';
|
|
} else if (dateformat == 'metric') {
|
|
dateformat_str = 'dd/mm/yyyy';
|
|
} else if (dateformat == 'iso') {
|
|
dateformat_str = 'yyyy-mm-dd';
|
|
} else if (dateformat == 'dmydot') {
|
|
dateformat_str = 'dd.mm.yyyy';
|
|
}
|
|
return dateformat_str;
|
|
}
|
|
|
|
function validate_date(dateText, inst) {
|
|
if (!is_valid_date(dateText)) {
|
|
var dateformat_str = get_dateformat_str( dateformat_pref );
|
|
alert(MSG_PLEASE_ENTER_A_VALID_DATE.format(dateformat_str));
|
|
inst.clear();
|
|
}
|
|
}
|
|
|
|
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 (dateformat_pref === "iso") {
|
|
return new Date(dateX[0], (dateX[1] - 1), dateX[2]); // YYYY-MM-DD to (YYYY,m(0-11),d)
|
|
} else if (dateformat_pref === "us") {
|
|
return new Date(dateX[2], (dateX[0] - 1), dateX[1]); // MM/DD/YYYY to (YYYY,m(0-11),d)
|
|
} else if (dateformat_pref === "metric") {
|
|
return new Date(dateX[2], (dateX[1] - 1), dateX[0]); // DD/MM/YYYY to (YYYY,m(0-11),d)
|
|
} else if (dateformat_pref === "dmydot") {
|
|
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: " + dateformat_pref);
|
|
}
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
function DateTime_from_syspref(date_time) {
|
|
var parts = date_time.split(" ");
|
|
var date = parts[0];
|
|
var time = parts[1];
|
|
parts = time.split(":");
|
|
var hour = parts[0];
|
|
var minute = parts[1];
|
|
|
|
if (hour < 0 || hour > 23) {
|
|
return 0;
|
|
}
|
|
if (minute < 0 || minute > 59) {
|
|
return 0;
|
|
}
|
|
|
|
var datetime = Date_from_syspref(date);
|
|
|
|
if (isNaN(datetime.getTime())) {
|
|
return 0;
|
|
}
|
|
|
|
datetime.setHours(hour);
|
|
datetime.setMinutes(minute);
|
|
|
|
return datetime;
|
|
}
|
|
|
|
/* Instead of including multiple localization files as you would normally see with
|
|
jQueryUI we expose the localization strings in the default configuration */
|
|
jQuery(function ($) {
|
|
$.datepicker.regional[''] = {
|
|
closeText: __("Done"),
|
|
prevText: __("Prev"),
|
|
nextText: __("Next"),
|
|
currentText: __("Today"),
|
|
monthNames: [__("January"), __("February"), __("March"), __("April"), __("May"), __("June"),
|
|
__("July"), __("August"), __("September"), __("October"), __("November"), __("December")
|
|
],
|
|
monthNamesShort: [__("Jan"), __("Feb"), __("Mar"), __("Apr"), __("May"), __("Jun"),
|
|
__("Jul"), __("Aug"), __("Sep"), __("Oct"), __("Nov"), __("Dec")
|
|
],
|
|
dayNames: [__("Sunday"), __("Monday"), __("Tuesday"), __("Wednesday"), __("Thursday"), __("Friday"), __("Saturday")],
|
|
dayNamesShort: [__("Sun"), __("Mon"), __("Tue"), __("Wed"), __("Thu"), __("Fri"), __("Sat")],
|
|
dayNamesMin: [__("Su"), __("Mo"), __("Tu"), __("We"), __("Th"), __("Fr"), __("Sa")],
|
|
weekHeader: __("Wk"),
|
|
dateFormat: dateformat_string,
|
|
firstDay: calendarFirstDayOfWeek,
|
|
isRTL: bidi,
|
|
showMonthAfterYear: false,
|
|
yearSuffix: ''
|
|
};
|
|
$.datepicker.setDefaults($.datepicker.regional['']);
|
|
});
|
|
|
|
/* jQuery Validator plugin custom method
|
|
This allows you to check that a given date falls after another.
|
|
It is required that a message be defined.
|
|
|
|
Syntax:
|
|
$("#form_id").validate({
|
|
rules: {
|
|
input_name_of_later_date_field: {
|
|
is_date_after: "#input_id_of_earlier_date_field"
|
|
},
|
|
},
|
|
messages: {
|
|
input_name_of_later_date_field: {
|
|
is_date_after: _("Validation error to be shown, i.e. End date must come after start date")
|
|
}
|
|
}
|
|
});
|
|
*/
|
|
|
|
jQuery.validator.addMethod("is_date_after",
|
|
function (value, element, params) {
|
|
var from = Date_from_syspref($(params).val());
|
|
var to = Date_from_syspref(value);
|
|
return to > from;
|
|
});
|
|
|
|
jQuery.validator.addMethod("date_on_or_after",
|
|
function (value, element, params) {
|
|
var from = Date_from_syspref($(params).val());
|
|
var to = Date_from_syspref(value);
|
|
return to >= from;
|
|
});
|
|
|
|
var flatpickr_weekdays = {
|
|
shorthand: [ __("Sun"), __("Mon"), __("Tue"), __("Wed"), __("Thu"), __("Fri"), __("Sat")],
|
|
longhand: [ __("Sunday"), __("Monday"), __("Tuesday"), __("Wednesday"), __("Thursday"), __("Friday"), __("Saturday") ]
|
|
};
|
|
|
|
var flatpickr_months = {
|
|
shorthand: [ __("Jan"), __("Feb"), __("Mar"), __("Apr"), __("May"), __("Jun"), __("Jul"), __("Aug"), __("Sep"), __("Oct"), __("Nov"), __("Dec")],
|
|
longhand: [ __("January"), __("February"), __("March"), __("April"), __("May"), __("June"), __("July"), __("August"), __("September"), __("October"), __("November"), __("December")]
|
|
};
|
|
|
|
$(document).ready(function () {
|
|
|
|
$.datepicker.setDefaults({
|
|
showOn: "both",
|
|
buttonImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAT0lEQVQ4jWNgoAZYd/LVf3IwigGkAuwGLE4hDg9eA4il8RqADVdtLYVjZLVEuwDZAKJcgKxh+zkyXIBuI8lhgG4jOqZdLJACMAygKDNRAgBj9qOB+rWnhAAAAABJRU5ErkJggg==",
|
|
buttonImageOnly: true,
|
|
buttonText: __("Select date"),
|
|
changeMonth: true,
|
|
changeYear: true,
|
|
showButtonPanel: true,
|
|
showOtherMonths: true,
|
|
selectOtherMonths: true,
|
|
yearRange: "c-100:c+10"
|
|
});
|
|
|
|
$(".datepicker").datepicker({
|
|
onClose: function (dateText, inst) {
|
|
validate_date(dateText, inst);
|
|
},
|
|
}).on("change", function () {
|
|
if (!is_valid_date($(this).val())) {
|
|
$(this).val("");
|
|
} else {
|
|
var the_date = $.datepicker.parseDate(dateformat_string, $(this).val());
|
|
$(this).datepicker("setDate",the_date);
|
|
}
|
|
});
|
|
// http://jqueryui.com/demos/datepicker/#date-range
|
|
var dates = $(".datepickerfrom, .datepickerto").datepicker({
|
|
changeMonth: true,
|
|
numberOfMonths: 1,
|
|
onSelect: function (selectedDate) {
|
|
var option = this.id == "from" ? "minDate" : "maxDate",
|
|
instance = $(this).data("datepicker");
|
|
var date = $.datepicker.parseDate(
|
|
instance.settings.dateFormat ||
|
|
$.datepicker._defaults.dateFormat,
|
|
selectedDate, instance.settings);
|
|
dates.not(this).datepicker("option", option, date);
|
|
},
|
|
onClose: function (dateText, inst) {
|
|
validate_date(dateText, inst);
|
|
},
|
|
}).on("change", function () {
|
|
if (!is_valid_date($(this).val())) {
|
|
$(this).val("");
|
|
}
|
|
});
|
|
});
|