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 :-)
This question is related to
javascript
jquery-ui
localization
calendar
jquery-ui-datepicker
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ì','Martedì','Mercoledì','Giovedì','Venerdì','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.
Here is example how you can do localization without some extra library.
jQuery(function($) {_x000D_
$('input.datetimepicker').datepicker({_x000D_
duration: '',_x000D_
changeMonth: false,_x000D_
changeYear: false,_x000D_
yearRange: '2010:2020',_x000D_
showTime: false,_x000D_
time24h: true_x000D_
});_x000D_
_x000D_
$.datepicker.regional['cs'] = {_x000D_
closeText: 'Zavrít',_x000D_
prevText: '<Dríve',_x000D_
nextText: 'Pozdeji>',_x000D_
currentText: 'Nyní',_x000D_
monthNames: ['leden', 'únor', 'brezen', 'duben', 'kveten', 'cerven', 'cervenec', 'srpen',_x000D_
'zárí', 'ríjen', 'listopad', 'prosinec'_x000D_
],_x000D_
monthNamesShort: ['led', 'úno', 'bre', 'dub', 'kve', 'cer', 'cvc', 'srp', 'zár', 'ríj', 'lis', 'pro'],_x000D_
dayNames: ['nedele', 'pondelí', 'úterý', 'streda', 'ctvrtek', 'pátek', 'sobota'],_x000D_
dayNamesShort: ['ne', 'po', 'út', 'st', 'ct', 'pá', 'so'],_x000D_
dayNamesMin: ['ne', 'po', 'út', 'st', 'ct', 'pá', 'so'],_x000D_
weekHeader: 'Týd',_x000D_
dateFormat: 'dd/mm/yy',_x000D_
firstDay: 1,_x000D_
isRTL: false,_x000D_
showMonthAfterYear: false,_x000D_
yearSuffix: ''_x000D_
};_x000D_
_x000D_
$.datepicker.setDefaults($.datepicker.regional['cs']);_x000D_
});<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />_x000D_
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>_x000D_
<script src="datepicker-cs.js"></script>_x000D_
<script type="text/javascript">_x000D_
$(document).ready(function() {_x000D_
console.log("test");_x000D_
$("#test").datepicker({_x000D_
dateFormat: "dd.m.yy",_x000D_
minDate: 0,_x000D_
showOtherMonths: true,_x000D_
firstDay: 1_x000D_
});_x000D_
});_x000D_
</script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<h1>Here is your datepicker</h1>_x000D_
<input id="test" type="text" />_x000D_
</body>_x000D_
</html>just in case anyone is STILL stuck on this, despite the other answers, I solved this with:
$.datepicker.setDefaults($.datepicker.regional['en-GB']);
note the extra 'GB'. After that it worked fine.
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
just in case anyone is STILL stuck on this, despite the other answers, I solved this with:
$.datepicker.setDefaults($.datepicker.regional['en-GB']);
note the extra 'GB'. After that it worked fine.
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"]);
I solved it by adding the property data-date-language="it":
$(document).ready(function() {_x000D_
$('#TxtDaDataDoc_Val').datepicker();_x000D_
});<meta charset="utf-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">_x000D_
<link rel="stylesheet" href="/resources/demos/style.css">_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>_x000D_
_x000D_
<div class="form-group col-xs-2 col-sm-2 col-md-2">_x000D_
<div class="input-group input-append date form-group" _x000D_
id="TxtDaDataDoc" data-date-language="it">_x000D_
<input type="text" class="form-control" name="date" _x000D_
id="TxtDaDataDoc_Val" runat="server" />_x000D_
<span class="input-group-addon add-on">_x000D_
<span class="glyphicon glyphicon-calendar"></span>_x000D_
</span>_x000D_
</div>_x000D_
</div>This solution may help.
$(document).ready(function () {_x000D_
var userLang = navigator.language || navigator.userLanguage;_x000D_
_x000D_
var options = $.extend({},_x000D_
$.datepicker.regional["ja"], {_x000D_
dateFormat: "yy/mm/dd",_x000D_
changeMonth: true,_x000D_
changeYear: true,_x000D_
highlightWeek: true_x000D_
}_x000D_
);_x000D_
_x000D_
$("#japaneseCalendar").datepicker(options);_x000D_
});#ui-datepicker-div {_x000D_
font-size: 14px;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<link rel="stylesheet" type="text/css"_x000D_
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">_x000D_
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<h3>Japanese JQuery UI Datepicker</h3>_x000D_
<input type="text" id="japaneseCalendar"/>_x000D_
_x000D_
</body>_x000D_
</html>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: https://github.com/moment/moment/tree/develop/locale
moment.locale('fi');
// 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 (https://github.com/moment/moment/issues/890)
};
$.datepicker.setDefaults($.datepicker.regional['user']);
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src=">/js/datepicker-fr.js"></script>
<script>
jQuery(function() {
jQuery( "#datepicker" ).datepicker({minDate: 0 , dateFormat: 'mm/dd/yy'});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker($.datepicker.regional['fr']);
});
</script>
$.datepicker.regional["vi-VN"] = { closeText: "Ðóng", prevText: "Tru?c", nextText: "Sau", currentText: "Hôm nay", monthNames: ["Tháng m?t", "Tháng hai", "Tháng ba", "Tháng tu", "Tháng nam", "Tháng sáu", "Tháng b?y", "Tháng tám", "Tháng chín", "Tháng mu?i", "Tháng mu?i m?t", "Tháng mu?i hai"], monthNamesShort: ["M?t", "Hai", "Ba", "B?n", "Nam", "Sáu", "B?y", "Tám", "Chín", "Mu?i", "Mu?i m?t", "Mu?i hai"], dayNames: ["Ch? nh?t", "Th? hai", "Th? ba", "Th? tu", "Th? nam", "Th? sáu", "Th? b?y"], dayNamesShort: ["CN", "Hai", "Ba", "Tu", "Nam", "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: "" };
$.datepicker.setDefaults($.datepicker.regional["vi-VN"]);
$.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
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"]);
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src=">/js/datepicker-fr.js"></script>
<script>
jQuery(function() {
jQuery( "#datepicker" ).datepicker({minDate: 0 , dateFormat: 'mm/dd/yy'});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker($.datepicker.regional['fr']);
});
</script>
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 ...
I solved it by adding the property data-date-language="it":
$(document).ready(function() {_x000D_
$('#TxtDaDataDoc_Val').datepicker();_x000D_
});<meta charset="utf-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">_x000D_
<link rel="stylesheet" href="/resources/demos/style.css">_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>_x000D_
_x000D_
<div class="form-group col-xs-2 col-sm-2 col-md-2">_x000D_
<div class="input-group input-append date form-group" _x000D_
id="TxtDaDataDoc" data-date-language="it">_x000D_
<input type="text" class="form-control" name="date" _x000D_
id="TxtDaDataDoc_Val" runat="server" />_x000D_
<span class="input-group-addon add-on">_x000D_
<span class="glyphicon glyphicon-calendar"></span>_x000D_
</span>_x000D_
</div>_x000D_
</div>This solution may help.
$(document).ready(function () {_x000D_
var userLang = navigator.language || navigator.userLanguage;_x000D_
_x000D_
var options = $.extend({},_x000D_
$.datepicker.regional["ja"], {_x000D_
dateFormat: "yy/mm/dd",_x000D_
changeMonth: true,_x000D_
changeYear: true,_x000D_
highlightWeek: true_x000D_
}_x000D_
);_x000D_
_x000D_
$("#japaneseCalendar").datepicker(options);_x000D_
});#ui-datepicker-div {_x000D_
font-size: 14px;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<link rel="stylesheet" type="text/css"_x000D_
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">_x000D_
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<h3>Japanese JQuery UI Datepicker</h3>_x000D_
<input type="text" id="japaneseCalendar"/>_x000D_
_x000D_
</body>_x000D_
</html>$.datepicker.regional["vi-VN"] = { closeText: "Ðóng", prevText: "Tru?c", nextText: "Sau", currentText: "Hôm nay", monthNames: ["Tháng m?t", "Tháng hai", "Tháng ba", "Tháng tu", "Tháng nam", "Tháng sáu", "Tháng b?y", "Tháng tám", "Tháng chín", "Tháng mu?i", "Tháng mu?i m?t", "Tháng mu?i hai"], monthNamesShort: ["M?t", "Hai", "Ba", "B?n", "Nam", "Sáu", "B?y", "Tám", "Chín", "Mu?i", "Mu?i m?t", "Mu?i hai"], dayNames: ["Ch? nh?t", "Th? hai", "Th? ba", "Th? tu", "Th? nam", "Th? sáu", "Th? b?y"], dayNamesShort: ["CN", "Hai", "Ba", "Tu", "Nam", "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: "" };
$.datepicker.setDefaults($.datepicker.regional["vi-VN"]);
$.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
Here is example how you can do localization without some extra library.
jQuery(function($) {_x000D_
$('input.datetimepicker').datepicker({_x000D_
duration: '',_x000D_
changeMonth: false,_x000D_
changeYear: false,_x000D_
yearRange: '2010:2020',_x000D_
showTime: false,_x000D_
time24h: true_x000D_
});_x000D_
_x000D_
$.datepicker.regional['cs'] = {_x000D_
closeText: 'Zavrít',_x000D_
prevText: '<Dríve',_x000D_
nextText: 'Pozdeji>',_x000D_
currentText: 'Nyní',_x000D_
monthNames: ['leden', 'únor', 'brezen', 'duben', 'kveten', 'cerven', 'cervenec', 'srpen',_x000D_
'zárí', 'ríjen', 'listopad', 'prosinec'_x000D_
],_x000D_
monthNamesShort: ['led', 'úno', 'bre', 'dub', 'kve', 'cer', 'cvc', 'srp', 'zár', 'ríj', 'lis', 'pro'],_x000D_
dayNames: ['nedele', 'pondelí', 'úterý', 'streda', 'ctvrtek', 'pátek', 'sobota'],_x000D_
dayNamesShort: ['ne', 'po', 'út', 'st', 'ct', 'pá', 'so'],_x000D_
dayNamesMin: ['ne', 'po', 'út', 'st', 'ct', 'pá', 'so'],_x000D_
weekHeader: 'Týd',_x000D_
dateFormat: 'dd/mm/yy',_x000D_
firstDay: 1,_x000D_
isRTL: false,_x000D_
showMonthAfterYear: false,_x000D_
yearSuffix: ''_x000D_
};_x000D_
_x000D_
$.datepicker.setDefaults($.datepicker.regional['cs']);_x000D_
});<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />_x000D_
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>_x000D_
<script src="datepicker-cs.js"></script>_x000D_
<script type="text/javascript">_x000D_
$(document).ready(function() {_x000D_
console.log("test");_x000D_
$("#test").datepicker({_x000D_
dateFormat: "dd.m.yy",_x000D_
minDate: 0,_x000D_
showOtherMonths: true,_x000D_
firstDay: 1_x000D_
});_x000D_
});_x000D_
</script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<h1>Here is your datepicker</h1>_x000D_
<input id="test" type="text" />_x000D_
</body>_x000D_
</html>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ì','Martedì','Mercoledì','Giovedì','Venerdì','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.
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 ...
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
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: https://github.com/moment/moment/tree/develop/locale
moment.locale('fi');
// 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 (https://github.com/moment/moment/issues/890)
};
$.datepicker.setDefaults($.datepicker.regional['user']);
Source: Stackoverflow.com