更改引导DateTimePicker的语言

时间：2013-10-15 13:13:44

标签： javascript twitter-bootstrap translate smalot-datetimepicker

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

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

我导入了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>

在document.ready

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

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

但未翻译

我试图在init上插入

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

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

12 个答案:

答案 0 :(得分：57)

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

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

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

$.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"
};

是为'ru'定义的

答案 1 :(得分：19)

如果您使用 /users ，则需要加载moment.js而不是moment-with-locales.min.js。否则，您的moment.min.js将无效。

答案 2 :(得分：13)

你需要在片刻之后添加javascript语言文件，例如：

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

现在你可以设置一种语言。

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

以下是所有语言：https://github.com/moment/moment

答案 3 :(得分：8)

选项为locale: 'ru'

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

希望这会有所帮助。

答案 4 :(得分：6)

只需在插件后添加所需的区域设置即可。您可以在github https://github.com/uxsolutions/bootstrap-datepicker/tree/master/dist/locales

上的区域设置文件夹中找到它 
<script src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>

然后添加选项

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

XX 是您希望的语言环境，例如 ru

答案 5 :(得分：3)

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

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

很明显在moment.min.js之后。

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。在js文件的ready函数中设置此行。

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

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

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

按照此步骤操作，我能够将我的英语datepicker和datetimepicker成功转换为荷兰语。

答案 6 :(得分：2)

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

在datepicker.js中的2.add数组如下：

＆＃13;
＆＃13; 
$.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: ["上午", "下午"]
}
	};
＆＃13;
＆＃13;
＆＃13;

答案 7 :(得分：1)

对于像我这样的人无法用上面的解决方案解决此问题，我很高兴地确认您是否同时在不同位置初始化$（element）.datetimepicker（...）。

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

如果出于某种原因需要在不同的文件中维护不同的初始化工作，请记住使用以下命令删除datetimepicker：

$(element).datetimepicker('remove')

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

编辑：此解决方案仍需要在bootstrap-datetimepicker.js之后正确地导入语言文件。

我希望这会有所帮助！

答案 8 :(得分：1)

对于讲法语的人，这就是你的做法

        ;(function($){
        $.fn.datepicker.dates['fr'] = {
            days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
            daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
            daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
            months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
            monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
            today: "Aujourd'hui",
            monthsTitle: "Mois",
            clear: "Effacer",
            weekStart: 1,
            format: "dd/mm/yyyy"
        };
    }(jQuery));

    $('.js-datepicker').datepicker({
        format: 'dd/mm/yyyy',
        startDate: new Date(),
        language: 'fr',
    });

感谢此来源：https://www.1formatik.com/1056/comment-mettre-bootstrap-datepicker-en-francais

答案 9 :(得分：0)

这仅供参考：

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

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

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

情况如下：

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

答案 10 :(得分：0)

尝试一下：

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

答案 11 :(得分：0)

一切都正确！另一种获取方式！

mydata[0][i.toString()]

您可以在https://cdnjs.com/libraries/bootstrap-datepicker上找到所有语言

https://labs.maarch.org/maarch/maarchRM/commit/3299d1e7ed25018b48715e16a42d52c288b4da3e

相关问题
最新问题