How do I localize the jQuery UI Datepicker?

Question

I really need a localized dropdown calendar. An English calendar doesn't exactly communicate excellence on a Norwegian website ;-)

I have experimented with the jQuery DatePicker, their website says it can be localized, however that doesn't seem to work.

I am using ASPNET.MVC, and I really want to stick to one javascript library. In this case jQuery.

The ajax toolkit calendar would be acceptable, if only it too would display Norwegian names.

Update: Awesome! I see I am missing the language files, a not so minor detail :-)

Solution 1

For those that still have problems, you have to download the language file your want from here:

https://github.com/jquery/jquery-ui/tree/master/ui/i18n

and then include it in your page like this for example(italian language):

<script type="text/javascript" src="/scripts/jquery.ui.datepicker-it.js"></script>

then use zilverdistel's code :D

Solution 2

I figured out the demo and implemented it the following way:

$.datepicker.setDefaults(
  $.extend(
    {'dateFormat':'dd-mm-yy'},
    $.datepicker.regional['nl']
  )
);

I needed to set the default for the dateformat too ...

Solution 3

The string $.datepicker.regional['it'] not translate all words.

For translate the datepicker you must specify some variables:

$.datepicker.regional['it'] = {
    closeText: 'Chiudi', // set a close button text
    currentText: 'Oggi', // set today text
    monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno',   'Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'], // set month names
    monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'], // set short month names
    dayNames: ['Domenica','Luned&#236','Marted&#236','Mercoled&#236','Gioved&#236','Venerd&#236','Sabato'], // set days names
    dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'], // set short day names
    dayNamesMin: ['Do','Lu','Ma','Me','Gio','Ve','Sa'], // set more short days names
    dateFormat: 'dd/mm/yy' // set format date
};

$.datepicker.setDefaults($.datepicker.regional['it']);

$(".datepicker").datepicker();

In this case your datepicker is properly translated.

Solution 4

  $.datepicker.setDefaults({
    closeText: "关闭",
    prevText: "<上月",
    nextText: "下月>",
    currentText: "今天",
    monthNames: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
    dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ],
    dayNamesMin: [ "日","一","二","三","四","五","六" ],
    weekHeader: "周",
    dateFormat: "yy-mm-dd",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: "年"
  });

the i18n code could be copied from https://github.com/jquery/jquery-ui/tree/master/ui/i18n

Solution 5

1. You need to load the jQuery UI i18n files:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js">
</script>

2. Use $.datepicker.setDefaults function to set defaults for ALL datepickers.

3. In case you want to override setting(s) before setting defaults you can use this:

var options = $.extend(
    {},                                  // empty object
    $.datepicker.regional["fr"],         // fr regional
    { dateFormat: "d MM, y" /*, ... */ } // your custom options
);
$.datepicker.setDefaults(options);

The order of parameters is important because of the way jQuery.extend works. Two incorrect examples:

/*
 * This overwrites the global variable itself instead of creating a
 * customized copy of french regional settings
 */
$.extend($.datepicker.regional["fr"], { dateFormat: "d MM, y"});

/*
 * The desired dateFormat is overwritten by french regional 
 * settings' date format
 */
$.extend({ dateFormat: "d MM, y"}, $.datepicker.regional["fr"]);

View more solutions

Comments

[alaster]

this worked for me: $.datepicker.setDefaults($.datepicker.regional["uk"]);

[Adam]

Is this link missing in on the jQuery UI page? I can't find it there jqueryui.com/datepicker/#localization

[Alexander Dixon]

This answer shows how to add the localization directly, without importing libraries. This is the method that I needed because I am utilizing jQuery's $.getScript() to fetch the main library on Google's hosted API.

[PeterXX]

Much better due to not having to load another js script