настройка языка в средстве выбора диапазона дат Bootstrap

Я использую средство выбора диапазона дат Bootstrap, предоставленное и объясненное На этой странице я добавил всю библиотеку, используя 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" />

Но дело в том, что мне нужно все на испанском, и я не вижу фрагмента кода для его настройки. как мне это сделать?


twitter-bootstrap-3 daterangepicker
person Sredny M Casanova    schedule 04.12.2015    source источник

Ответы (4)


arrow_upward
58
arrow_downward

Включите параметр locale и отредактируйте соответствующие строки, например fromLabel или December :

$('#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
    }
})

вот демонстрация с испанскими названиями месяцев -> http://jsfiddle.net/r21747qc/

person davidkonrad    schedule 04.12.2015

arrow_upward
38
arrow_downward

Вы можете использовать moment-with-locales.min.js вместо moment.min.js.

<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>

и установите локализацию перед инициализацией daterangepicker

moment.locale('es');
$('#datePicker').daterangepicker();
person Oleg    schedule 19.05.2016
comment
очень важно выделить слово вместо этого, если вы загрузите оба файла moment и moment-with-locales, это решение НЕ будет работать. вам нужно ЗАМЕНИТЬ moment на moment-with-locales. НЕ ЗАГРУЖАЙТЕ ИХ ОБА - person Hakan Fıstık; 14.01.2017

arrow_upward
4
arrow_downward

Я сделал пример «pt-br» на основе комментария @davidkonrad.

$('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

person João Pedro Raldi    schedule 13.11.2017
comment
Извините, источник moment.js теперь отключен. Я обновился и теперь работает. - person João Pedro Raldi; 06.09.2018
comment
все еще не работает... вы правы, это похоже на проблему с moment.js - person Sam; 08.09.2018
comment
Ну, я исправил в тот день. Вероятно, они вернулись в прежнее состояние. Сейчас снова работает. - person João Pedro Raldi; 10.09.2018

arrow_upward
1
arrow_downward

Для тех, кто использует 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",
     }
});
person Johan H.    schedule 09.04.2020