动态本地化bootstrap-datetimepicker

时间:2013-11-24 12:05:12

标签: jquery localization datetimepicker

我正在尝试本地化bootstrap-datetimepicker,其中包含包含不同语言的文件夹'locales'。

此选择器有一个名为“语言”的选项。我只是把它放在后面'nl'看看它会做什么。这当然不起作用,因为语言'nl'是在不同的文件中定义的。

将“locale”中的'nl'语言复制到“bootstrap-datetimepicker.js”文件中就可以了。在'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: []
        }
    };

我的问题是,有没有办法加载包含所需语言的文件,而不是将所有这些语言放在js文件中,就像我在这里用'nl'语言一样?

修改

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;
    };

在视图(ASP.NET-MVC)中,我正在使用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"
    });
 });

1 个答案:

答案 0 :(得分:2)

关注DOC

  

该插件支持i18n的月份和工作日名称和   weekStart选项。默认为英语(' en');其他可用   翻译在js / locales /目录中可用,只需包括   插件后所需的语言环境。要简单地添加更多语言   在调用之前,在$ .fn.datetimepicker.dates中添加一个键   .datetimepicker()。