From jQuery JavaScript Library

« Back to UI/Datepicker

This page explains how to create a localization for the jQuery UI Datepicker plugin.

Localization

The date picker is designed to allow localizations to be easily created and used. Many localizations are already available and additional ones are welcomed.

The date picker plugin maintains a manager object, $.datepicker, that lets you register new localizations. This object maintains an array of localization settings indexed by language, with '' accessing the default (English) version: $.datepicker.regional['fr'].

A new localization should be created in a separate JavaScript file named ui.datepicker-<language>.js. Within a document.ready event it should add a new entry into the $.datepicker.regional array, indexed by the language code, with the following attributes:

clearText: 'Clear' Display text for clear link

clearStatus: 'Erase the current date' Status text for clear link

closeText: 'Close' Display text for close link

closeStatus: 'Close without change' Status text for close link

prevText: '<Prev' Display text for previous month link

prevStatus: 'Show the previous month' Status text for previous month link

nextText: 'Next>' Display text for next month link

nextStatus: 'Show the next month' Status text for next month link

currentText: 'Today' Display text for current month link

currentStatus: 'Show the current month' Status text for current month link

monthNames: ['January','February','March','April','May','June', 'July','August','September','October','November','December'] Names of months for drop-down and formatting

monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] For formatting

monthStatus: 'Show a different month' Status text for selecting a month

yearStatus: 'Show a different year' Status text for selecting a year

weekHeader: 'Wk' Header for the week of the year column

weekStatus: 'Week of the year' Status text for the week of the year column

dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] For formatting

dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] For formatting

dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'] Column headings for days starting at Sunday

dayStatus: 'Set DD as first week day' Status text for the day of the week selection

dateStatus: 'Select D, M d' Status text for the date selection

dateFormat: 'mm/dd/yy' See format options on parseDate

firstDay: 0 The first day of the week, Sun = 0, Mon = 1, ...

initStatus: 'Select a date' Initial Status text on opening

isRTL: false True if right-to-left language, false if left-to-right

It should then set these values as global defaults so that they are automatically applied when this JavaScript is loaded: $.datepicker.setDefaults($.datepicker.regional['<language>']);.

If necessary, the default language, or any other, may be re-established via a similar mechanism: $.datepicker.setDefaults($.datepicker.regional['']);. And then the localizations may be applied to a single instance of the datepicker: $('selector').datepicker($.datepicker.regional['<language>']);

The complete French localization is shown below and is available as ui.datepicker-fr.js.

/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood@virginbroadband.com.au) and Stéphane Nahmani (sholby@sholby.net). */
jQuery(function($){
	$.datepicker.regional['fr'] = {clearText: 'Effacer', clearStatus: '',
		closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
		prevText: '<Préc', prevStatus: 'Voir le mois précédent',
		nextText: 'Suiv>', nextStatus: 'Voir le mois suivant',
		currentText: 'Courant', currentStatus: 'Voir le mois courant',
		monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
		'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
		monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
		'Jul','Aoû','Sep','Oct','Nov','Déc'],
		monthStatus: 'Voir un autre mois', yearStatus: 'Voir un autre année',
		weekHeader: 'Sm', weekStatus: '',
		dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
		dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
		dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
		dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
		dateFormat: 'dd/mm/yy', firstDay: 0, 
		initStatus: 'Choisir la date', isRTL: false};
	$.datepicker.setDefaults($.datepicker.regional['fr']);
});