configuring language in Bootstrap Date Range Picker

Question

I am using the Bootstrap Date Range Picker provided and explained In this page I added all the library using the cdn, I mean this:

<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" />

But the thing is that I need all in spanish and I don´t see a piece of code to configurate it. How should I do it?

davidkonrad · Accepted Answer · 2015-12-04T07:39:13.897

Include the locale option and edit the appropriate strings, like fromLabel or 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
    }
})

here is a demo with spanish month names -> http://jsfiddle.net/r21747qc/

score 42 · Answer 2 · answered May 19 '16 at 18:39

42

You can use moment-with-locales.min.js instead of moment.min.js

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

and set localization before initializing daterangepicker

moment.locale('es');
$('#datePicker').daterangepicker();

answered May 19 '16 at 18:39

Oleg

2,165
1
15
7

9

it is very important to emphasis the word **instead**, if you load the both file `moment` and `moment-with-locales` this solution will NOT work. you have to **REPLACE** the `moment` with `moment-with-locales`. **DO NOT LOAD THEM BOTH** – Hakan Fıstık Jan 14 '17 at 08:51

João Pedro Raldi · Answer 3 · 2018-09-10T11:32:32.703

4

I made an 'pt-br' example based on @davidkonrad's comment

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

edited Sep 10 '18 at 11:32

answered Nov 13 '17 at 18:25

João Pedro Raldi

124
8

Sorry, the source of "moment.js" is now disabled. I updated and now is running. – João Pedro Raldi Sep 06 '18 at 11:07
still doesn't work... you are right, it looks like a problem with moment.js – Sam Sep 08 '18 at 06:44
Well, i fixed that day. They probably returned to the previous state. Now is working again. – João Pedro Raldi Sep 10 '18 at 11:31

score 3 · Answer 4 · answered Apr 09 '20 at 22:33

For those using Node

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

Then set the options names as month and days names will be translated


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

score -1 · Answer 5 · answered Mar 27 '18 at 18:01

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

configuring language in Bootstrap Date Range Picker

5 Answers5