How do I localize the jQuery UI Datepicker?

JavascriptJquery UiLocalizationCalendarJquery Ui-Datepicker

Javascript Problem Overview

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 :-)

Javascript Solutions

Solution 1 - Javascript

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


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 - Javascript

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


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

Solution 3 - Javascript

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



In this case your datepicker is properly translated.

Solution 4 - Javascript

    closeText: "关闭",
    prevText: "&#x3C;上月",
    nextText: "下月&#x3E;",
    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

Solution 5 - Javascript

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

<script src="//">

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

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"]);

Solution 6 - Javascript

Here is example how you can do localization without some extra library.

jQuery(function($) {
    duration: '',
    changeMonth: false,
    changeYear: false,
    yearRange: '2010:2020',
    showTime: false,
    time24h: true

  $.datepicker.regional['cs'] = {
    closeText: 'Zavřít',
    prevText: '&#x3c;Dříve',
    nextText: 'Později&#x3e;',
    currentText: 'Nyní',
    monthNames: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen',
      'září', 'říjen', 'listopad', 'prosinec'
    monthNamesShort: ['led', 'úno', 'bře', 'dub', 'kvě', 'čer', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
    dayNames: ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'],
    dayNamesShort: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
    dayNamesMin: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
    weekHeader: 'Týd',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''


<!DOCTYPE html>

  <script src=""></script>
  <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//" />
  <script data-require="jqueryui@*" data-semver="1.10.0" src="//"></script>
  <script src="datepicker-cs.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        dateFormat: "dd.m.yy",
        minDate: 0,
        showOtherMonths: true,
        firstDay: 1

  <h1>Here is your datepicker</h1>
  <input id="test" type="text" />

Solution 7 - Javascript

If you use jQuery UI's datepicker and moment.js on the same project, you should piggyback off of moment.js's locale data:

// Finnish. you need to include separate locale file for each locale:

// fetch locale data internal structure, so we can shove it inside jQuery UI
var momentLocaleData = moment.localeData(); 

$.datepicker.regional['user'] = {
    monthNames: momentLocaleData._months,
    monthNamesShort: momentLocaleData._monthsShort,
    dayNames: momentLocaleData._weekdays,
    dayNamesShort: momentLocaleData._weekdaysMin,
    dayNamesMin: momentLocaleData._weekdaysMin,
    firstDay: momentLocaleData._week.dow,
    dateFormat: 'yy-mm-dd' // "2016-11-22". date formatting tokens are not easily interchangeable between momentjs and jQuery UI (


Solution 8 - Javascript

just in case anyone is STILL stuck on this, despite the other answers, I solved this with:


note the extra 'GB'. After that it worked fine.

Solution 9 - Javascript

This solution may help.

$(document).ready(function () {
  var userLang = navigator.language || navigator.userLanguage;

  var options = $.extend({},
    $.datepicker.regional["ja"], {
      dateFormat: "yy/mm/dd",
      changeMonth: true,
      changeYear: true,
      highlightWeek: true


#ui-datepicker-div {
  font-size: 14px;

<!DOCTYPE html>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>


Solution 10 - Javascript

I solved it by adding the property data-date-language="it":

$(document).ready(function() {

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src=""></script>
<script src=""></script>
<script src=""></script>

<div class="form-group col-xs-2 col-sm-2 col-md-2">
    <div class="input-group input-append date form-group" 
        id="TxtDaDataDoc" data-date-language="it">
        <input type="text" class="form-control" name="date" 
               id="TxtDaDataDoc_Val" runat="server" />
        <span class="input-group-addon add-on">
            <span class="glyphicon glyphicon-calendar"></span>

Solution 11 - Javascript

<link rel="stylesheet" href="//">

<script src="//"></script>
<script src=">/js/datepicker-fr.js"></script>
jQuery(function() {
jQuery( "#datepicker" ).datepicker({minDate: 0 , dateFormat: 'mm/dd/yy'});


<script type="text/javascript">

Solution 12 - Javascript

$.datepicker.regional["vi-VN"] = { closeText: "Đóng", prevText: "Trước", nextText: "Sau", currentText: "Hôm nay", monthNames: ["Tháng một", "Tháng hai", "Tháng ba", "Tháng tư", "Tháng năm", "Tháng sáu", "Tháng bảy", "Tháng tám", "Tháng chín", "Tháng mười", "Tháng mười một", "Tháng mười hai"], monthNamesShort: ["Một", "Hai", "Ba", "Bốn", "Năm", "Sáu", "Bảy", "Tám", "Chín", "Mười", "Mười một", "Mười hai"], dayNames: ["Chủ nhật", "Thứ hai", "Thứ ba", "Thứ tư", "Thứ năm", "Thứ sáu", "Thứ bảy"], dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"], dayNamesMin: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"], weekHeader: "Tuần", dateFormat: "dd/mm/yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: "" };



All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionThomas EydeView Question on Stackoverflow
Solution 1 - Javascriptmax4everView Answer on Stackoverflow
Solution 2 - JavascriptZilverdistelView Answer on Stackoverflow
Solution 3 - JavascriptkampageddonView Answer on Stackoverflow
Solution 4 - Javascriptuser1087079View Answer on Stackoverflow
Solution 5 - JavascriptSalman AView Answer on Stackoverflow
Solution 6 - JavascriptMarek PavelekView Answer on Stackoverflow
Solution 7 - Javascriptjoonas.fiView Answer on Stackoverflow
Solution 8 - JavascriptDevDonkeyView Answer on Stackoverflow
Solution 9 - Javascriptuser6703538View Answer on Stackoverflow
Solution 10 - JavascriptDanieleView Answer on Stackoverflow
Solution 11 - JavascriptAmusetoiView Answer on Stackoverflow
Solution 12 - JavascriptTrần Văn HuyView Answer on Stackoverflow