Home / Questions / 258110
Accepted
Huntzberger
Asked: 2020-04-25 09:09:15 +0800 CST 2020-04-25 09:09:15 +0800 CST

Change language in datetimepicker

  • 772

I have a datetimepicker but it comes out by default in English, I want to know if there is a way to change it to Spanish.

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

enter image description here

This error appears in the console:

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

javascript

3 Answers

  1. Best Answer

    You can specify the language you want like so:

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

    Your CDN must point to the language version you wantlocales/bootstrap-datepicker.es.min.js

    • 2

  2. In the case of datetimepicker the way I solved it was with...

    (It was a dynamically generated field)

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

    Since in my case only with the ...

    language: 'es',

    It wasn't enough.

    • 0 
  3. $('#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>

    Add this moment route: locale.js Add this moment route: locale.js

    Result:

    code result

    • 0