Notes on localization and jQueryUI Datepicker.

June 04, 2010 at 10:24 AM | categories: Programming | View Comments

The current documentation for the jQuery UI Datepicker control and localization are a little bit sparse. The overview tab has a blurb about the the $.datepicker.regional object containing a set of localizations indexed by locale code ('fr', 'en-GB', etc) and that those locales return an object with the attributes that provide a basis for the options object to be provided to the $('selector').datepicker() function, then there is a link to the localization files in Subversion. Lets be clear about how the $.datepicker.regional object is populated and how to use it:

  1. You can get all of the locales as one big file from the Google CDN as:
  2. Even though you can, you probably should not include the giant file of all locales from the Google CDN because it will add 9.5KB compressed or 50KB uncompressed. Include the locales you need in a combined minified file for you site (perhaps combined with the rest of the scripts for your site)
  3. The $.datepicker.regional object will not fall back to a less specific locale, i.e. if you give it fr-CA, it will not fall back to fr if it does not have it, you would have to come up with that logic yourself.

Points 1 and 2 can be improved by adding the ability to select the locales in the jQuery UI Download builder tool. Point 3 can be improved by adding a $.datepicker.getregion() function that returns a valid object based on the normal locale parsing rules.

The function might look like:

$.datepicker.getregion = function(region) {
  var retval = $.datepicker.regional[region];
  if (retval) {
    return retval;
  region = region.split('-');
  retval = $.datepicker.regional[0];
  if (region.length == 2 && retval) {
    return retval;
  return $.datepicker.regional[''];
Read and Post Comments