Pikaday en formato español

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 solucionar el problema del formato de fecha en 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…

  • https://github.com/dbushell/Pikaday
  • http://momentjs.com/

El header os deberá quedar de esta manera:

1
2
3
4
5
6
7
8
<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:

1
2
3
4
5
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 example by Trescomatres (@trescomatres) on CodePen.

Artículos relacionados

AMCHARTS – Pixel Map Generator Pixel Map Generator de AMCHARTS, és una más que interesante herramienta (en fase BETA - Nota! da algún error no importante) para visualización de dato...
JavaScript – Sumar días o meses a una fecha Veamos un ejemplo de cómo sumar a la fecha actual, días o meses en Javascript. Uno de los temas más engorrosos debido a los diferentes formatos de fec...
JavaScript – Cargar las librerías online ... Los servicios CDN nos permiten cargar librerías javascript sin necesidad de descargarlas en nuestros servidores. Pero qué es CDN? Tiremos de WikiPe...
Mo.js – Librería Javascript para movimientos... Empezamos sección de recursos de librerías que nos haran la vida mas fácil cuando programemos. En este caso, nos centraremos en mo.js, una libería jav...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*