Language setting in Bootstrap Date Range Picker

Question

I am using Bootstrap's boot date picker set and explained. On this page I added the whole library using 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 fact is that I need everything in Spanish, and I don’t see a piece of code to configure it. How can I do it?

Answer 1

Turn on the locale option and edit the appropriate lines, for example 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 the names of the spanish month → http://jsfiddle.net/r21747qc/

Answer 2

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

Answer 3

I made an example of "pt-br" based on a comment by @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/

Answer 4

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