Pikaday en formato español

Publicada el por

Alguno de vosotros ya conoceréis librerías javascript que permiten escoger una fecha de un formulario mediante un calendario. De los mas famosos es DatePicker. Pues os dejo aquí otra librería, Pikaday, que os puede interesar. Además os pongo un ejemplo que para poner Pikaday en formato español.

Para empezar, podéis visitar la web para descargaros la librería. Eso si, también necesitaréis la librería moments.js. Ésta última permite trabajar con la fechas: formatos, sumar días…

El header os deberá quedar de esta manera:

<head>
  ...
  <link href="http://miweb.com/js/pikaday/pikaday.css" rel="stylesheet" type="text/css">
  ...
  <script src="http://miweb.com/js/pikaday/moment.js"></script>
  <script src="http://miweb.com/js/pikaday/pikaday.js"></script>
  ...
</head>

Atención: El orden de la carga de las librerías ha de ser esta. Primero moments.js i luego pikaday.js. En caso contrario, no funcionará el formato de las fechas. Si no os funciona el formato en pikaday, revisar el orden de carga de las librerías.

En el formulario deberemos añadir el campo dónde se mostrará el calendario:

<form action="http://miweb.com/envioform" method="post">
  ...
  <input type="text" name="fecha" id="fecha" value="" />
  ...
</form>

Ahora toca el código javascript, que ya facilito para que el formato y los textos salgan en español:

<script>
var picker = new Pikaday({
  field: document.getElementById('fecha'),
  i18n: {
    previousMonth : 'Anterior',
    nextMonth     : 'Siguiente',
    months        : ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    weekdays      : ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
    weekdaysShort : ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb']
  },
  format: 'DD/MM/YYYY',
  onSelect: function(date) {
    field.value = this.getMoment().format('DD/MM/YYYY');
  }
});
</script>

Si no os importa ir traduciendo las fechas del inglés (para mysql) y las fechas en español (usuario), podéis trabajar directamente con el formato inglés:

<script>
var picker = new Pikaday({
  field: document.getElementById('fecha'),
  i18n: {
    previousMonth : 'Anterior',
    nextMonth     : 'Siguiente',
    months        : ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    weekdays      : ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
    weekdaysShort : ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb']
  },
  format: 'YYYY-MM-DD',
  onSelect: function(date) {
    field.value = this.getMoment().format('YYYY-MM-DD');
  }
});
</script>

Aquí tenéis el código en acción:

See the Pen Pikaday en formato español by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Espero que os haya sido de utilidad el artículo.

Más información