configuring language in Bootstrap Date Range Picker

Sredny M Casanova picture Sredny M Casanova · Dec 4, 2015 · Viewed 58.8k times · Source

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?

Answer

davidkonrad picture davidkonrad · Dec 4, 2015

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/