在Bootstrap Date Range Picker中配置语言

时间:2015-12-04 01:57:01

标签: twitter-bootstrap-3 daterangepicker

我正在使用提供的Bootstrap Date Range Picker并解释In this page我使用cdn添加了所有库,我的意思是:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

但问题是我需要所有西班牙语,我没有看到一段代码来配置它。我该怎么办?

5 个答案:

答案 0 :(得分:42)

添加locale选项并修改相应的字符串,例如fromLabelDecember

$('#datePicker').daterangepicker({
    "locale": {
        "format": "MM/DD/YYYY",
        "separator": " - ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "daysOfWeek": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
        ],
        "monthNames": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        "firstDay": 1
    }
})

这是一个西班牙月份名称的演示 - &gt;的 http://jsfiddle.net/r21747qc/

答案 1 :(得分:27)

您可以使用 moment-with-locales.min.js 代替 moment.min.js

<table id="elitable" border="1" cellspacing="0" width="100%">
  <tr>
 <td>100</td><td>AAA</td><td>aaa</td>
  </tr>
  <tr>
<td>200</td><td>BBB</td><td>bbb</td>
   </tr>
   <tr>
<td>300</td><td>CCC</td><td>ccc</td>
  </tr>
</table>


    <script>
    $(function(){
        $("#elitable tr").click(function(){
        alert (this.rowIndex);
        });
    });
    </script>

并在初始化daterangepicker

之前设置本地化
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>

答案 2 :(得分:2)

我根据@ davidkonrad的评论

制作了一个'pt-br'示例
$('input[name="daterange"]').daterangepicker({
"locale": {
    "format": "DD/MM/YYYY",
    "separator": " - ",
    "applyLabel": "Aplicar",
    "cancelLabel": "Cancelar",
    "fromLabel": "De",
    "toLabel": "Até",
    "customRangeLabel": "Custom",
    "daysOfWeek": [
        "Dom",
        "Seg",
        "Ter",
        "Qua",
        "Qui",
        "Sex",
        "Sáb"
    ],
    "monthNames": [
        "Janeiro",
        "Fevereiro",
        "Março",
        "Abril",
        "Maio",
        "Junho",
        "Julho",
        "Agosto",
        "Setembro",
        "Outubro",
        "Novembro",
        "Dezembro"
    ],
    "firstDay": 0
}});

https://jsfiddle.net/joaopedroraldi/d7bmppga/55

答案 3 :(得分:1)

对于使用Node的用户

    var moment = require('moment');
    moment.locale('es');
    require('daterangepicker/daterangepicker');

然后将选项名称设置为将翻译的月份和日期名称


$('#datePicker').daterangepicker({
    "locale": {
        "format": "MM/DD/YYYY",
        "separator": " - ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
     }
});

答案 4 :(得分:-1)

$('input[name="fecha_rango"]').daterangepicker({ autoUpdateInput: false, format: "DD/MM/YYYY", "locale": {
"separator": " - ", "applyLabel": "Aplicar", "cancelLabel": "Cancelar", "fromLabel": "DE", "toLabel": "HASTA", "customRangeLabel": "Custom", "daysOfWeek": [ "Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sáb" ], "monthNames": [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ], "firstDay": 1 }});