Bug 26261: Split calendar.inc into include file and JavaScript file
This patch moves most of the JavaScript out of calendar.inc and into a new file, calendar.js. English strings in calendar.js are now wrapped in the double-underscore function to allow for translation. The patch shouldn't affect datepicker functionality in any way. To test, apply the patch and test the datepicker in various contexts: - Reports -> Statistics wizards -> Patrons - Date of birth "from" and "to" should be linked so that the former must come before the latter. - Patrons -> Add or edit patron - The date of birth field datepicker shouldn't allow you to pick a future year from the dropdown. - Tools -> Calendar. - Test that the calendar tool works correctly. - Test with various settings of the dateformat system preference. TESTING TRANSLATABILITY - Update a translation, e.g. fr-FR: > cd misc/translator > perl translate update fr-FR - Open the corresponding .po file for JavaScript strings, e.g. misc/translator/po/fr-FR-messages-js.po - Locate strings pulled from koha-tmpl/intranet-tmpl/prog/en/js/calendar.js for translation, e.g.: msgid "August" msgstr "" - Edit the "msgstr" string however you want (it's just for testing). - Install the updated translation: > perl translate install fr-FR - Switch to your newly translated language in the staff client and test the datepicker again. Translated strings like days of the week and months should be correct. Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
Owen Leonard
Jonathan Druart
parent
171e7bfc51
commit
701fde53ed
|
|
@ -1,212 +1,14 @@
|
|||
[% USE Asset %]
|
||||
[% USE Koha %]
|
||||
[% USE raw %]
|
||||
<!-- calendar.inc -->
|
||||
<script>
|
||||
|
||||
var debug = "[% debug | html %]";
|
||||
var dformat = "[% dateformat | html %]";
|
||||
var sentmsg = 0;
|
||||
if (debug > 1) {alert("dateformat: " + dformat + "\ndebug is on (level " + debug + ")");}
|
||||
var MSG_PLEASE_ENTER_A_VALID_DATE = (_("Please enter a valid date (should match %s)."));
|
||||
|
||||
function is_valid_date(date) {
|
||||
// An empty string is considered as a valid date for convenient reasons.
|
||||
if ( date === '' ) return 1;
|
||||
|
||||
var dateformat = dateformat_str = '[% Koha.Preference('dateformat') | html %]';
|
||||
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 {
|
||||
$.datepicker.parseDate(dateformat, date);
|
||||
} 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( '[% Koha.Preference('dateformat') | html %]' );
|
||||
alert(MSG_PLEASE_ENTER_A_VALID_DATE.format(dateformat_str));
|
||||
$('#'+inst.id).val('');
|
||||
}
|
||||
}
|
||||
|
||||
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 (dformat === "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: " +dformat);}
|
||||
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: "[% IF ( dateformat == "us" ) %]mm/dd/yy[% ELSIF ( dateformat == "metric" ) %]dd/mm/yy[% ELSIF ( dateformat == "dmydot" ) %]dd.mm.yy[% ELSE %]yy-mm-dd[% END %]",
|
||||
firstDay: '[% Koha.Preference('CalendarFirstDayOfWeek') | html %]',
|
||||
isRTL: [% IF ( bidi ) %]true[% ELSE %]false[% END %],
|
||||
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;
|
||||
});
|
||||
|
||||
$(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"
|
||||
});
|
||||
|
||||
$("#dateofbirth").datepicker({
|
||||
yearRange: "c-100:c"
|
||||
});
|
||||
|
||||
$(".futuredate").datepicker({
|
||||
minDate: 1, // require that hold suspended until date is after today
|
||||
});
|
||||
|
||||
$( ".datepicker" ).datepicker({
|
||||
onClose: function(dateText, inst) {
|
||||
validate_date(dateText, inst);
|
||||
},
|
||||
}).on("change", function(e, value) {
|
||||
if ( ! is_valid_date( $(this).val() ) ) {$(this).val("");}
|
||||
});
|
||||
// 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" );
|
||||
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(e, value) {
|
||||
if ( ! is_valid_date( $(this).val() ) ) {$(this).val("");}
|
||||
});
|
||||
});
|
||||
var debug = "[% debug | html %]";
|
||||
var dateformat_pref = "[% Koha.Preference('dateformat ') | html %]";
|
||||
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 %];
|
||||
var sentmsg = 0;
|
||||
var bidi = [% IF(bidi) %] true[% ELSE %] false[% END %];
|
||||
var calendarFirstDayOfWeek = '[% Koha.Preference('CalendarFirstDayOfWeek') | html %]';
|
||||
</script>
|
||||
<!-- / calendar.inc -->
|
||||
[% Asset.js("js/calendar.js") | $raw %]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,218 @@
|
|||
/* global debug sentmsg __ dateformat_pref dateformat_string bidi calendarFirstDayOfWeek */
|
||||
/* exported DateTime_from_syspref */
|
||||
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 {
|
||||
$.datepicker.parseDate(dateformat, date);
|
||||
} 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.id).val('');
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
$(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"
|
||||
});
|
||||
|
||||
$("#dateofbirth").datepicker({
|
||||
yearRange: "c-100:c"
|
||||
});
|
||||
|
||||
$(".futuredate").datepicker({
|
||||
minDate: 1, // require that hold suspended until date is after today
|
||||
});
|
||||
|
||||
$(".datepicker").datepicker({
|
||||
onClose: function (dateText, inst) {
|
||||
validate_date(dateText, inst);
|
||||
},
|
||||
}).on("change", function () {
|
||||
if (!is_valid_date($(this).val())) {
|
||||
$(this).val("");
|
||||
}
|
||||
});
|
||||
// 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("");
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue