5

Tengo un datetimepicker pero sale predeterminado en ingles, quiero saber si hay manera de cambiarlo a español.

jQuery(function($) {
  $.datetimepicker.regional['es'] = {
    closeText: 'Cerrar',
    prevText: '<Ant',
    nextText: 'Sig>',
    currentText: 'Hoy',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
      'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
    ],
    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
      'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'
    ],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
    dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
    weekHeader: 'Sm',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };
  $.datetimepicker.setDefaults($.datetimepicker.regional['es']);
});

$(document).ready(function() {
  $(".fecha").datetimepicker({
    format: 'Y-MM-D',
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<input class="form-control" id="fecha" name="fecha" placeholder="fecha -- " type="text" />

introducir la descripción de la imagen aquí

Sale este error en consola:

jQuery.Deferred exception: Cannot read property 'regional' of undefined TypeError: Cannot read property 'regional' of undefined

4 respuestas 4

3

Puedes especificar el idioma que quieres asi:

$(function () {
        $("#fecha").datepicker({
            language: 'es'
        });
    });
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<input class="form-control" id="fecha" name="fecha" placeholder="fecha -- " type="text"/>

Tu CDN debe de apuntar a la version del idioma que quieres locales/bootstrap-datepicker.es.min.js

4
  • Hola, dice jQuery.Deferred exception: option language is not recognized! en consola y ya no abre el calendario Commented el 24 abr. 2019 a las 17:15
  • has descargalo la carpeta locales de la libreria? Commented el 24 abr. 2019 a las 17:30
  • ya quedo listo, Gracias Commented el 24 abr. 2019 a las 18:50
  • La pregunta hace referencia a datetimepicker no datepicker. Commented el 20 ene. 2020 a las 12:23
0

En el caso de datetimepicker la forma que lo solucione fue con...

(Era un campo que se generaba de forma dinámica)

      $('.js-datetimepickerNotMinutes').datetimepicker.dates['en'] = {
                    days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"],
                    daysShort: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab", "Dom"],
                    daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"],
                    months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                    monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    today: "Hoy"
                };


  $('.js-datetimepickerNotMinutes').datetimepicker({
              uiLibrary: 'bootstrap4',
                                defaultDate: "+1w",
                                showOn: 'button',
                                numberOfMonths: 1,
                                format: 'dd-mm-yyyy hh:00',
                                language: 'es',
                                daysShort: ["Sunx", "Monx", "Tuex", "Wedx", "Thux", "Frix", "Satx", "Sunx"],
                                weekStart: 1,
                                minView: "day",
                                minuteStep: 61,
                                autoclose: true
                              });

Ya que en mi caso solamente con el ...

language: 'es',

No bastaba.

0
$('#reservationdate').datetimepicker({
locale: 'es',
format: 'DD-MM-YYYY',
daysOfWeekDisabled: [6],     
//defaultDate: "11/1/2013",
disabledDates: [
  // moment("12/25/2013"),      
  "11-11-2021",
  "11-10-2021",
  "11-05-2021"
], });



<div class="form-group">
  <label>Date:</label>
  <div class="input-group date" id="reservationdate" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask/>
    <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
     <div class="input-group-text"><i class="fa fa-calendar"></i></div>
     </div>
   </div>                                 
</div>

Agrega este ruta de moment: locale.js Agrega este ruta de moment: locale.js

Resultado:

Resultado del codigo

0

Solo con locale: "es-ES", en el js se soluciona. Por ejemplo:

// Calender
    $('#calender').datetimepicker({
        locale: "es-ES",
        inline: true,
        format: 'L'
    });

Y en el Head:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/locales/bootstrap-datepicker.es.min.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.