twitter-bootstrap 更改引导程序 DateTimePicker 的语言

Change language for bootstrap DateTimePicker

提问by Alex

I use bootstrap-datetimepicker.jsCopyright 2012 by Stefan Petre

我使用bootstrap-datetimepicker.jsStefan Petre 的版权所有 2012

http://www.malot.fr/bootstrap-datetimepicker/index.php

http://www.malot.fr/bootstrap-datetimepicker/index.php

I import the js and another language, for example Russian:

我导入了 js 和另一种语言，例如俄语：

<script type="text/javascript" 
  src="/Resources/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" 
  src="/Resources/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.ru.js" charset="UTF-8"></script>

in document.ready

在 document.ready 中

$(document).ready(function () {
    // debugger;

    $(".form_datetime").datetimepicker({
        isRTL: false,
        format: 'dd.mm.yyyy hh:ii',
        autoclose:true
    });
});

but it is not translated

但它没有被翻译

I tried to insert on init

我试图在 init 上插入

**language: "RU"**
**language: "ru"**
**language: "ru-RU"**

but nothing changes, Do you have any proposal?

但没有任何变化，你有什么建议吗？

回答by mador

i think you have to set it in the options:

我认为你必须在选项中设置它：

$(".form_datetime").datetimepicker({
    isRTL: false,
    format: 'dd.mm.yyyy hh:ii',
    autoclose:true,
    language: 'ru'
});

if its not working, be sure that:

如果它不起作用，请确保：

$.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"],
    today: "Today"
};

is defined for 'ru'

定义为 'ru'

回答by alx lark

If you use moment.jsthe you need to load moment-with-locales.min.jsnot moment.min.js. Otherwise, your locale: 'ru'will not work.

如果您使用 ，moment.js则需要加载moment-with-locales.min.jsnot moment.min.js。否则，您locale: 'ru'将无法工作。

回答by Neftali Acosta

you need to add the javascript language file,after the moment library, example:

您需要添加 javascript 语言文件，在 moment 库之后，例如：

<script type="text/javascript" src="js/moment/moment.js"></script>
<script type="text/javascript" src="js/moment/es.js"></script>

now you can set a language.

现在您可以设置语言。

<script type="text/javascript">
$(function () {
  $('#datetimepicker1').datetimepicker({locale:'es'});
});
</script>

Here are all language: https://github.com/moment/moment

这里是所有语言：https: //github.com/moment/moment

回答by JazZ

The option is locale: 'ru'

选项是 locale: 'ru'

But first, you have to call the script ../moment.js/version/locale/ru.js

但首先，你必须调用脚本 ../moment.js/version/locale/ru.js

Hope this helps.

希望这可以帮助。

回答by Nikolay Bronskiy

Just include your desired locale after the plugin. You can find it in localesfolder on github https://github.com/uxsolutions/bootstrap-datepicker/tree/master/dist/locales

只需在插件后包含您想要的语言环境。您可以在 github https://github.com/uxsolutions/bootstrap-datepicker/tree/master/dist/locales上的locales文件夹中找到它

<script src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>

and then add option

然后添加选项

$('.datepicker').datepicker({
   language: 'XX'
});

Where XXis your desired locale like ru

其中XX是您想要的语言环境，例如ru

回答by TanvirChowdhury

1.First add this js file to your HTML.

1.首先将此js文件添加到您的HTML中。

<script th:src="@{${webLinkFactory.jsLibRootPath()}+'/bootstrap-datepicker.nl.min.js'}" charset="UTF-8"type="text/javascript"></script>

obviously after moment.min.js.

显然在moment.min.js之后。

content of bootstrap-datepicker.nl.min.js will be

bootstrap-datepicker.nl.min.js 的内容将是

;(function($){
    $.fn.datepicker.dates['nl'] = {
        days: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
        daysShort: ["Zon", "Man", "Din", "Woe", "Don", "Vri", "Zat", "Zon"],
        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: []
    };
    $.fn.datetimepicker.dates['nl'] = {
        days: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
        daysShort: ["Zon", "Man", "Din", "Woe", "Don", "Vri", "Zat", "Zon"],
        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: []
    };
}(jQuery));

2.set this line in the ready function of your js file.

2.在你的js文件的ready函数中设置这一行。

$(document).ready(function () {
    $.fn.datetimepicker.defaults.language = 'nl';
}

3.initialize your datetimepicker in this way

3.以这种方式初始化您的日期时间选择器

$(this).datetimepicker({
                        format: "yyyy-mm-dd hh:ii",
                        autoclose: true,
                        weekStart: 1,
                        locale: 'nl',
                        language: 'nl'
                    });

following this steps i was able to convert my english datepicker and datetimepicker to dutch successfully.

按照此步骤，我能够成功地将我的英语日期选择器和日期时间选择器转换为荷兰语。

回答by user3248659

1.you will use different locale array element in datepicker.js from following link https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales

1.您将在来自以下链接的 datepicker.js 中使用不同的语言环境数组元素 https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales

2.add array in datepicker.js like this:

2. 在 datepicker.js 中添加数组，如下所示：

$.fn.datepicker.Constructor = Datepicker;
    var dates = $.fn.datepicker.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"],
            today: "Today"
        },
        CN:{
        days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
        daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    today: "今天",
    suffix: [],
    meridiem: ["上午", "下午"]
}
 };

回答by Denys

For those who like me could not solve this problem with the solutions above, I sugest verifying if you initialize the $(element).datetimepicker(...) in different locations at the same time.

对于像我这样无法通过上述解决方案解决此问题的人，我建议验证您是否同时在不同位置初始化 $(element).datetimepicker(...)。

In my case, after a long time, I found a global.js interfering with another datetimepicker initialization.

就我而言，经过很长时间，我发现 global.js 干扰了另一个 datetimepicker 初始化。

If you need for some reason maintain work with different initializations, in different files, remember to remove the datetimepicker before each one with:

如果您出于某种原因需要在不同的文件中使用不同的初始化来维护工作，请记住在每个文件之前删除 datetimepicker：

$(element).datetimepicker('remove')

$(element).datetimepicker('remove')

Reference: https://www.malot.fr/bootstrap-datetimepicker/index.php#methods

参考：https: //www.malot.fr/bootstrap-datetimepicker/index.php#methods

Edit: This solution still needs to import the language files correctly, right after the bootstrap-datetimepicker.js.

编辑：此解决方案仍然需要在bootstrap-datetimepicker.js.

I hope this helps!

我希望这有帮助！

回答by kiss_von

This is for your reference only:

仅供参考：

https://github.com/rajit/bootstrap3-datepicker/tree/master/locales/zh-CN

https://github.com/rajit/bootstrap3-datepicker/tree/master/locales/zh-CN

https://github.com/smalot/bootstrap-datetimepicker

https://github.com/smalot/bootstrap-datetimepicker

https://bootstrap-datepicker.readthedocs.io/en/v1.4.1/i18n.html

https://bootstrap-datepicker.readthedocs.io/en/v1.4.1/i18n.html

The case is as follows：

案例如下：

 <div class="input" id="event_period">
   <input class="date" required="required" type="text">
 </div>

 $.fn.datepicker.dates['zh-CN'] = {
    days:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
    daysShort:["周日","周一","周二","周三","周四","周五","周六"],
    daysMin:["日","一","二","三","四","五","六"],
    months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    monthsShort:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
    today:"今日",
    clear:"清除"
  };

  $('#event_period').datepicker({
    inputs: $('input.date'),
    todayBtn: "linked",
    clearBtn: true,
    format: "yyyy年mm月",
    titleFormat: "yyyy年mm月",
    language: 'zh-CN',
    weekStart:1 // Available or not
  });

回答by Adrian

Try this:

试试这个：

$( ".form_datetime" ).datepicker( $.datepicker.regional[ "zh-CN" ], { dateFormat: 'dd.mm.yyyy hh:ii' });