Localizing the Datepicker (^) ❘ 395
It is also possible to make only the month a
Localizing the Datepicker
The Datepicker plugin has many localization options that allow you to completely change how the
calendar looks, the text that it uses, the date format that it uses, and the weekday the calendar starts
on. The following sections describe how to localize a Datepicker implementation.Setting the Date Format
You can change the date format displayed as the value of the <input> element to whatever format
you like. The following script, Example-16-5, demonstrates how to change the date format so that
the day is placed before the month, as is done with dates in much of the world:$(document).ready(
function()
{
$('input#exampleDate').datepicker({
changeMonth : true,
changeYear : true,
minDate : new Date(1900, 1, 1),
maxDate : new Date(2020, 12, 31),
yearRange : "1900:2020",
dateFormat : "dd/mm/yy"
});$('div.exampleDate img').click(
function()
{
$(this)
.prev('input')
.focus();
}
);
}
);In the preceding script, the date format is set using the dateFormat option; in this case, it specifi es
the day, month, and year—the day and month with leading zeroes and the year in four-digit format.
A full list of options is available in Appendix O, in the “Format Options” section. Figure 16-5 shows
that the day appears fi rst, then the month, and then the year.Localizing Datepicker Text
You can use the following options to localize, customize, or translate an implementation of
Datepicker:➤ (^) appendText—The text to display after each date fi eld.
➤ (^) buttonText—The text to display on the button element that triggers the Datepicker.
http://www.it-ebooks.info