jQuery UI Datepicker, como poner el calendario en español, euskera o cualquier otro idioma.

alojamiento wordpress

Hola a todos:

Hoy voy a mostrar como configurar las opciones de localización idiomática del datepicker de jQuery UI.

Como ya sabréis jQuery UI nos proporciona una serie de elementos de interface de usuario listos para utilizar de una manera muy sencilla.

Entre estos elementos con los que cuenta  jQuery UI se  encuentra Datepicker que nos proporciona un elegante calendario personalizable que nos permite introducir fechas de una manera visual en nuestros formularios.

   Formulario con DatePickerPara insertar un calendario en nuestro formulario escribiremos el siguiente código:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Fechas</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function () {
$("#fecha").datepicker();
});
</script>
</head>
<body>
<label for="fecha">Fecha:
 <input type="text" id="fecha" value="" />
</label>
</body>
</html>

Con esto le indicamos que se aplique  el calendario al campo con id fecha.

Por último incluimos en el body un campo input de tipo text al que le asignamos el id=”fecha”.

Cabe resaltar que el estilo del calendario es personalizable y se pueden aplicar diferentes estilos css. Existen muchos themes con estilos ya pre-diseñados listos para utilizarse.

Podéis descargar los themes desde aqui: http://jqueryui.com/download/

Como podréis observar el calendario del ejemplo anterior está configurado en inglés, que es el idioma que utiliza por defecto si no le indicamos nada.

¿Como podemos utilizar el datepicker en otros idiomas?

Primero tenemos que definir los parámetros regionales del idioma.

El código necesario para poner  el datepicker en español  es el siguiente:

<script>
 $.datepicker.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',
 dateFormat: 'dd/mm/yy',
 firstDay: 1,
 isRTL: false,
 showMonthAfterYear: false,
 yearSuffix: ''
 };
 $.datepicker.setDefaults($.datepicker.regional['es']);
$(function () {
$("#fecha").datepicker();
});
</script>

Como veis lo que hacemos es definir el regional ‘es’ con los nombres de los meses y de los días en español,  el formato de fecha que vamos a utilizar “dd/mm/yy”, etc.

Formulario con calendario en español

Y si queremos que el calendario aparezca por ejemplo en euskera el código completo quedaría de la siguiente manera:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Fechas</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>

 jQuery.datepicker.regional['eu'] = {
 closeText: 'Egina',
 prevText: '<Aur',
 nextText: 'Hur>',
 currentText: 'Gaur',
 monthNames: ['Urtarrila','Otsaila','Martxoa','Apirila','Maiatza','Ekaina',
 'Uztaila','Abuztua','Iraila','Urria','Azaroa','Abendua'],
 monthNamesShort: ['Urt','Ots','Mar','Api','Mai','Eka',
 'Uzt','Abu','Ira','Urr','Aza','Abe'],
 dayNames: ['Igandea','Astelehena','Asteartea','Asteazkena','Osteguna','Ostirala','Larunbata'],
 dayNamesShort: ['Iga','Ast','Ast','Ast','Ost','Ost','Lar'],
 dayNamesMin: ['Ig','As','As','As','Os','Os','La'],
 dateFormat: 'yy/mm/dd', firstDay: 1,
 isRTL: false};
 $.datepicker.setDefaults($.datepicker.regional['eu']);
$(function () {
$("#fecha").datepicker();
});
</script>
</head>
<body>
<label for="fecha">Fecha:
 <input type="text" id="fecha" value="" />
</label>
</body>
</html>

Espero que os haya servido de ayuda.

Cualquier duda podéis plantearla en los comentarios.

Salud!!!!

 

74 comentarios en “jQuery UI Datepicker, como poner el calendario en español, euskera o cualquier otro idioma.

  1. excelente!!, seria perfecto que indicara una forma de como hacerlo a traves de una ruta, sin tener que colocarlo en el codigo, yo realice el intento pero no entendí del todo como llamar la ruta

    1. Hola rotsen, gracias por comentar.

      No se si entiendo muy bien a que te refieren con “hacerlo a través de una ruta”.
      Si a lo que refieres es a poner el código javascript que hay entre las etiquetas “script” en un archivo .js y llamarlo en la cabecera es fácil, A demás es buena practica separar el código javascript del HTML, aquí yo lo puse todo junto en el HTML para que pudieseis probarlo de forma rápida solo con copiar el código tal y como está en una archivo html.
      Para poner el código en un archivo .js separado solo tienes que copiar lo que hay entre las etiquetas … en un llamado por ejemplo jquery.ui.datepicker-es.js, y situarlo en la ruta que quieras.
      luego en el html debajo de la linea tienes que añadir la llamada al archivo js con la ruta donde tengas el archivo js. Si lo has puesto en la raiz de tu proyecto tendrías que poner esto:

      Y con esto debería funcionarte.

  2. Hola amigo, me ayudo mucho vuestro ejemplo, tengo una duda, esto me funciona con un Textbox, pero cuando tengo dos como debería hacerlo?, tengo una pagina que debe mostrar una fecha inicio y una fin en formato dd-mm-yyyy, se agradece la ayuda

    1. Hola cnavarretehuerta, la forma mas sencilla de usar datepicker en varios textbox es asignarle una clase a ambos textbox y aplicarselo sobre el selector de la clase en lugar del id.

      Por ejemplo puedes tener dos textbox:


      <input type="text" name="fecha_inicio" id="fecha_inicio" class="fecha" />
      <input type="text" name="fecha_fin" id="fecha_fin" class="fecha" />

      Asegurate de ponerles id diferente a los campos para evitar problemas.

      En javascript en lugar de:
      $(function () {
      $(“#fecha”).datepicker();
      });
      Ponemos esto:
      $(function () {
      $(“.fecha”).datepicker();
      });

      Es decir, le aplicamos datepicker a todos los elementos con clase “fecha”.

      Espero haberme explicado.

      Un saludo

  3. Hola,

    Me ha servido mucho tu aporte pero tengo un pequño problema:

    Estoy trabajando en una web con varios idiomas, y para cada idioma cargo un archivo de idioma tipo lang_es.php en el cual están todas las constantes. Pero en javascript no puedo insertar código php, no?

    Un saludo

    1. Hola Sergio:
      No puedes puedes usar php desde javascript ya que se ejecuta en la parte cliente, pero si puedes generar dinámicamente javascript desde php.

      Si estas usando wordpress aquí explico como acceder a los idiomas de qTranslate mediante javascript.

      Si no, también puedes generar dinámicamete un script de javascript con los valores que necesites antes de cargar el js que los va a utilizar, o generar un js por cada idioma con las constantes que necesites y cargar uno u otro en función del idioma.

      Por ejemplo en el header puedes poner algo como esto:

      <?php if ($lang == ‘es’){
      ?>
      <script src=”lang_es.js”></script>
      <?php
      }
      ?>

      Espero que te sirba de ayuda.

      Un saludo

  4. Muy bueno, bastante interesante pero estoy atascado en poder sumar y restar fechas, hasta el momento lo tengo todo en español mediante tu apunte y cambie las clases para no tener que colocar tanto #id con el .datepicker(); con eso he podido optimizar bastante el codigo.
    Me gustaría podes calcular la diferencia en días o la diferencia en meses, cosas asi… te dejo la inquitud si es que me puedes ayudar, un saludo y gracias por el aporte

  5. Muchas gracias.
    Solo una objeción, mejor cambiar ” por ‘Ant’ y ‘Sig’, ya que en caso contrario en IE7 no se muestra correctamente la cabecera del calendario para ir al mes anterior

  6. Perdona mi ignorancia, pero ¿dónde tendría que copiar ese código? He instalado un plugin, “order delivery date”, que he conseguido traducir al español tocando su archivo php, pero el calendario sigue en inglés, entiendo que porque no es del plugin sino de wordpress. En qué archivo pues y en qué parte de él tengo que pegar el código para tener el calendario en español? Muchas gracias

    1. Hola,
      No he utilizado nunca ese plugin así que no se exactamente donde utiliza el calendario. Tendrás que localizar dentro de algún archivo js del plugin donde se genera el calendario y modificar el código para cambiar el idioma.

  7. master sos un genio.
    Casi siempre estan desactualizados cuando se traduce y da doleres de cabeza arreglarlos.
    Tu codigo añadido anda con la ulitma version de JQuery UI 2015.
    Un saludo

    1. Hola Quique, Muchas gracias por comentar.
      Una forma sencilla de cambiar el tamaño del datepicker es cambiando el tamaño de letra desde css de la siguiente manera:
      <style>
      .ui-widget { font-size: 15px; }
      </style>

      Prueba con varios tamaños de font-size para comprobar el tamaño final.
      Debes poner esto después de importar el css del datepicker. También puedes añadir esta regla css en un archivo local o editar directamente el archivo css del datepicker y cambiar el font-size del elemento .ui-widget si es que lo tienes en local.

      Espero haberte aclarado la duda.

      Un saludo

    1. Hola Luis, no se lo que quieres reemplazar, si has utilizado < y > al escribir el comentario sustituyelos por & l t ; (sin espacios) y & g t ; respectivamente si no desaparece lo que hay entre mayor y menor.
      Gracias

  8. buenas tardes quizas lo encuentre mas adelante pero de verdad no entiendo como hacer para que me muestre en un text box la cantidad de noches que tiene un rango (ya tengo los 2 datapicker) osea que me diga un numero de cual es la diferencia entre una fecha y otra despues de haber seleccionado la fecha de fin

  9. Hola Eduardo, se puede configurar el datepicker para que se pueda elegir un rango de fechas? Te consulto esto porque tengo un textbox el cual necesitaría que el usuario pueda elegir fecha de ingreso y no tiene sentido que el datepicker permita seleccionar una fecha que ya pasó… me explico? Gracias! El blog está excelente!

    1. Hola Augusto:
      Si se puede. Para evitar que el datepicker permita seleccionar fechas anteriores a la actual tienes que añadir el parámetro minDate: 0 al crear el datepicker, por ejemplo:

      $(“#fecha”).datepicker({minDate: 0});

      Gracias por comentar.

      Un saludo

  10. Hola Eduardo Excelente post me ayudo mucho a aprender sobre las fechas y calendarios solo que tengo aun una duda, en caso de que quisiera poner la fecha de otra forma como por ejemplo

    31 de Agosto del 2015

    Como seria posible?

    De antemano un saludo

  11. Hola Eduardo. Cómo hago para ver la fecha con formato dd/mm/yyyy? Estoy usando el datepicker con PostgreSQL y al editar un registro el input muestra yyyy-mm-dd.

  12. Excelente tutorial es justo lo que estaba buscando pero el único problema que tengo es que luego en la base de datos MySQL, no me guarda la fecha sino como 0000-00-00 y no sé como hacer para que me la guarde en el formato americano.

  13. Hola Eduardo, he estado mirando tu blog y es una maravilla como explicas todo el proceso de datepicker. Mi socio y yo hemos realizado una página con Prestashop para una agencia de viajes. Queremos colocar el datepicker para determinar el día de las reservas y no sé cómo añadirlo al archivo correspondiente. Trabajamos con AttributeWizard Pro, un módulo para poner lo atributos. Les he consultado para saber cómo añadir dentro de estos atributos el código de datepicker, pero no me quieren ayudar porque no es parte de su aplicación.
    Es posible saber que archivos debo “tocar” para colocar el campo texto y el datepicker???

  14. Hola Eduardo, yo implementé el calendario a través del plugin magic fields. Traduje manualmente el nombre de los meses y días modificando los archivos php y js pero el datepicker continúa apareciendo en inglés.
    ¿Podrías ayudarme a solucionarlo?
    Saludos y gracias!

    1. Hola Jorge:

      Normalmente no tengo tiempo de solucionar los problemas que surjan con plugins que no he probado y no conozco su funcionamiento. De hecho no mencionas que es un plugin para WordPress, lo he tenido que deducir, pero en esta ocasión he hecho una excepción.

      En los archivos del plugin entra en la carpeta js/custom_fields y edita el archivo datepicker.js y justo antes de jQuery(‘#’+picker).datepicker({ … pega el siguiente código:


      jQuery.datepicker.regional['es'] = {
      closeText: 'Cerrar',
      prevText: '',
      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',
      dateFormat: 'dd/mm/yy',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: ''
      };
      jQuery.datepicker.setDefaults(jQuery.datepicker.regional['es']);

      En los ejemplos de este post utilizamos $ para acceder a las funciones de jQuery, sin embargo en aquí debemos escribir la palabra jQuery.
      Ten en cuenta que si actualizas el plugin este cambio se perderá asi que tal vez lo óptimo sea añadir estas líneas en un js que se cargue antes que el plugin. Esto ya lo dejo en tus manos.

      Un saludo.

  15. hola!
    tengo esto predeterminado, com cambio ese código a castellano?

    jQuery(‘.pp_date’).datepicker({
    dateFormat:’M dd, yy’,
    numberOfMonths: 3,
    onSelect: function(){
    var myDate = new Date(this.value);
    var myDateRaw = myDate.setDate(myDate.getDate());
    jQuery(‘#’+jQuery(this).attr(‘id’)+’_raw’).attr(‘value’, myDateRaw);
    }
    });

    1. intente esto, pero no va

      —-

      jQuery(‘.pp_date’).datepicker({
      dateFormat:’M dd, yy’,
      numberOfMonths: 3,
      onSelect: function(){
      var myDate = new Date(this.value);
      var myDateRaw = myDate.setDate(myDate.getDate());
      jQuery.datepicker.regional[‘es’] = {
      closeText: ‘Cerrar’,
      prevText: ”,
      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’,
      dateFormat: ‘dd/mm/yy’,
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: ”
      };
      jQuery.datepicker.setDefaults(jQuery.datepicker.regional[‘es’]);

      jQuery(‘#’+jQuery(this).attr(‘id’)+’_raw’).attr(‘value’, myDateRaw);
      }
      });

      1. Hola Diana, prueba con este código:

        jQuery.datepicker.regional[‘es’] = {
        closeText: ‘Cerrar’,
        prevText: ”,
        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’,
        dateFormat: ‘M dd, yy’,
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ”,
        numberOfMonths: 3,
        onSelect: function(){
        var myDate = new Date(this.value);
        var myDateRaw = myDate.setDate(myDate.getDate());
        jQuery(‘#’+jQuery(this).attr(‘id’)+’_raw’).attr(‘value’, myDateRaw);
        }

        };
        jQuery.datepicker.setDefaults($.datepicker.regional[‘es’]);
        jQuery(function () {
        jQuery(“.pp_date”).datepicker();
        });

        Espero que te sirva, un saludo

    1. Hola Diana, revisa las comillas, WordPress sustituye automáticamente las comillas simples por apostrofes cuando haces copiar/pegar, también las dobles comillas las cambia, sustituye todas las comillas y vuelve a probar. Revisa que errores te marca y corrigelos.

  16. Genial Eduardo, gracias a tu post logré que me muestre el datepicker por fin!!! Pero tengo un problema, está siempre visible, ¿cómo hago para que me lo muestre sólo cuando hago click en el campo fecha? Soy nuevo en esto, como habrás notado… Muchas gracias!

      1. Eduardo, te paso el código del libros_form.html:
        Me muestra el datepicker permanentemente debajo del campo fecha_publicacion, y por más que seleccione una fecha no la carga en el campo fecha_publicacion. ¿Faltará algo en el views.py?

        {% extends ‘base.html’ %}
        {% block title %}Libros{% endblock %}
        {% block content %}

        http://code.jquery.com/jquery-1.12.4.js
        http://code.jquery.com/ui/1.12.1/jquery-ui.js

        $.datepicker.regional[‘es’] = {
        closeText: ‘Cerrar’,
        prevText: ”,
        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’,
        dateFormat: ‘dd/mm/yy’,
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ”
        };
        $.datepicker.setDefaults($.datepicker.regional[‘es’]);
        $(function() {
        $(‘#fecha_publicacion’).datepicker()
        });

        {% csrf_token %}

        {{ form.isbn.label_tag }}
        {{ form.isbn }}
        {{ form.isbn.errors }}

        {{ form.titulo.label_tag }}
        {{ form.titulo }}
        {{ form.titulo.errors }}

        {{ form.autor.label_tag }}
        {{ form.autor }}
        {{ form.autor.errors }}

        {{ form.descripcion.label_tag }}
        {{ form.descripcion }}
        {{ form.descripcion.errors }}

        {{ form.fecha_publicacion.label_tag }}
        {{ form.fecha_publicacion }}
        {{ form.fecha_publicacion.errors }}

        {{ form.precio.label_tag }}
        {{ form.precio }}
        {{ form.precio.errors }}

        Volver

        {% endblock %}

  17. Eduardo, ya encontré cuál era el problema. Estaba poniendo el script en el body del template, no en el head. Con eso se solucionó y se vé perfecto. Gracias nuevamente por tu ayuda.
    Saludos!

  18. Hola Sr Eduardo un placer.

    Mi duda el dia de hoy es que estoy tratando de obtener los datos que me proporciona el Datepicker, OJO no estoy trabajando con un input text, estoy trabajando con etiquetas DIV quiero obtener lo que la persona selecciona ya que estoy usando el datepicker en modo inline

    1. Hola Andrés, para obtener la fecha seleccionada tienes que incluir onSelect dentro de los parámetros del datepicker, es nuestro caso en los parámetros regionales del idioma incluiremos algo así:

      ….
      yearSuffix: ”,
      onSelect: function(date) {
      alert(date);
      }

      En este caso sacamos un alert de la fecha seleccionada, aquí pondrías la lógica que quieras realizar con la fecha.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s