I'm trying to localize the bootstrap-datetimepicker which has a folder 'locales' that contains the different languages.
This picker has an option called 'language'. I simply placed behind it 'nl' to see what that will do. This of course didn't work because the language 'nl' is defined in a different file.
Copying the 'nl' language from the file located in the 'locales' into the "bootstrap-datetimepicker.js" file did the trick. Right behind the 'en'-block:
var dates = $.fn.datetimepicker.dates = {
en: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
meridiem: ["am", "pm"],
suffix: ["st", "nd", "rd", "th"],
today: "Today"
},
nl: {
days: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
daysShort: ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"],
daysMin: ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"],
months: ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
monthsShort: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
today: "Vandaag",
suffix: [],
meridiem: []
}
};
My question is, is there a way to load the file containing the desired language instead of putting all those languages in the js file like I did here for the 'nl' language?
EDIT
function setLanguage() {
//debugger;
// Let's get the browser's language
var l_lang;
if (navigator.userLanguage) // Explorer
l_lang = navigator.userLanguage;
else if (navigator.language) // FF
l_lang = navigator.language;
else
l_lang = "";
// If the parameter passed is not a string or an array,
// or if no browser's language can be found, let's use default file.
if (l_lang == "") {
loadScript("Scripts/bootstrap-datetimepicker.min.js");
return;
}
var browserLang = l_lang.substr(0, 2);
if (browserLang != "" || browserLang != null) {
loadScript("Scripts/locales/bootstrap-datetimepicker." + browserLang + ".js");
loadScript("Scripts/bootstrap-datetimepicker.min.js");
return;
}
// If no language found, let's load the default language file:
loadScript("Scripts/bootstrap-datetimepicker.min.js");
};
// A simple function to dynamically load a script.
// Please note it uses jQuery (but you can adapt it easily)!
function loadScript(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
$("head").append(script);
return;
};
And in the view (ASP.NET-MVC) where I'm using the datetimepicker
:
$(document).ready(function () {
var browserLang;
if (navigator.userLanguage) // Explorer
browserLang = navigator.userLanguage.substr(0, 2);
else if (navigator.language) // FF
browserLang = navigator.language.substr(0, 2);
else
browserLang = 'en';
$('#dpk1').datetimepicker({
format: "dd M yyyy - hh:ii",
autoclose: true,
todayBtn: true,
minuteStep: 15,
startView: 2,
todayHighlight: true,
language: browserLang,
pickerPosition: "bottom-left"
});
$('#dpk2').datetimepicker({
format: "dd M yyyy - hh:ii",
autoclose: true,
todayBtn: true,
minuteStep: 15,
startView: 2,
todayHighlight: true,
language: browserLang,
pickerPosition: "bottom-left"
});
});
Following DOC:
The plugin supports i18n for the month and weekday names and the weekStart option. The default is English ('en'); other available translations are avilable in the js/locales/ directory, simply include your desired locale after the plugin. To add more languages, simply add a key to $.fn.datetimepicker.dates, before calling .datetimepicker().