Selector de fechas (datepicker) solo con JavaScript puro

Pikaday es un sencillo selector de fechas (datapicker) que funciona solo con JavaScript puro, es decir, sin la necesidad de utilizar ningún framework como por ejemplo jQuery.

PikaDay tiene como principal ventaja, ademas de solo requerir JavaScript, su ultra liviano peso, apenas unos 5kb en su versión simplificada y comprimida utilizando gzip. Ademas es muy sencillo de personalizar su aspecto visual, para ello simplemente modificamos algunas propiedades y valores CSS y problema solucionado.

selector de fechas solo JavaScript

Ejemplo de uso

HTML:

<input type="text" id="datepicker">

JavaScript:

var field = document.getElementById('datepicker');
var picker = new Pikaday({
    onSelect: function(date) {
        field.value = picker.toString();
    }
});
field.parentNode.insertBefore(picker.el, field.nextSibling);

Como comenté al comienzo de esta entrada este selector de fechas no tiene dependencias, sin embargo y en caso de utilizar jQuery en nuestro proyecto, esta biblioteca puede funcionar perfectamente de forma conjunta, inclusive podemos modificar la forma de inicializar la biblioteca de la siguiente manera:

Utilización con jQuery:

var picker = new Pikaday({ field: $('#datepicker')[0] });

No hay complicaciones a la hora de utilizar este proyecto. Pueden ver un ejemplo en su apartado en Github, ademas de ver diferentes formas de implementarlo en diversas situaciones.

Web: Pikaday

Categorizado en: