¿Qué es pickadate.js?

pickadate.js es una librería JavaScript ligera orientada a la selección de fechas y horas en interfaces web modernas. Funciona como un componente independiente que se integra fácilmente con formularios HTML, ofreciendo una experiencia de usuario fluida tanto en escritorio como en dispositivos móviles. Su API sencilla y su capacidad de personalización lo convierten en una alternativa popular frente a soluciones más pesadas.

Ventajas principales

• Footprint reducido: los archivos principales ocupan poco espacio, lo que mejora los tiempos de carga.
• Adaptabilidad visual: el diseño responde correctamente a diferentes tamaños de pantalla.
• Flexibilidad temática: permite modificar estilos mediante LESS y ajustar casi cualquier aspecto del selector.

Formas de instalar la librería

Desde el repositorio

git clone https://github.com/amsul/pickadate.js.git

Con Bower

bower install pickadate

Descargando el paquete

Se puede obtener el último lanzamiento estable desde la sección de releases del proyecto y copiar manualmente la carpeta lib al directorio de assets.

Estructura de archivos

El directorio lib contiene todo lo necesario para hacer funcionar la librería:

Lógica del selector

• picker.js: núcleo de la librería, imprescindible.
• picker.date.js: funcionalidad de selección de fechas.
• picker.time.js: funcionalidad de selección de horas.
• legacy.js: soporte para navegadores antiguos.

Hojas de estilo

En lib/themes se encuentran dos temas principales:

• Tema por defecto: default.css, default.date.css, default.time.css.
• Tema clásico: classic.css, classic.date.css, classic.time.css.

Para idiomas con lectura de derecha a izquierda se incluye además rtl.css.

Traducciones

La carpeta lib/translations incluye archivos para múltiples idiomas, entre ellos:

• es_ES.js — español.
• en_US.js — inglés estadounidense.
• fr_FR.js — francés.

Uso básico

Incluir los archivos necesarios

<link rel="stylesheet" href="lib/themes/default.date.css">
<link rel="stylesheet" href="lib/themes/default.time.css">

<script src="lib/picker.js"></script>
<script src="lib/picker.date.js"></script>
<script src="lib/picker.time.js"></script>

Inicializar un selector de fechas

<input type="text" class="campo-fecha">

<script>
 const nodoFecha = document.querySelector('.campo-fecha');
 $(nodoFecha).pickadate({
   format: 'yyyy-mm-dd',
   selectYears: true,
   selectMonths: true
 });
</script>

Inicializar un selector de horas

<input type="text" class="campo-hora">

<script>
 $('.campo-hora').pickatime({
   format: 'HH:i',
   interval: 30,
   min: [8, 0],
   max: [17, 30]
 });
</script>

Personalización avanzada

Crear un tema propio con LESS

Los estilos base se compilan desde LESS. Las variables clave se encuentran en lib/themes-source/_variables.less, donde se puede ajustar:

• La paleta cromática.
• Las dimensiones del calendario.
• Los puntos de ruptura de las media queries.

Tras modificar las variables, se regeneran los CSS con:

grunt develop

Adaptar el idioma

<script src="lib/translations/es_ES.js"></script>

<script>
 $('.campo-fecha').pickadate({
   format: 'dd/mm/yyyy',
   language: 'es_ES'
 });
</script>

Limitar rangos y fechas

$('.campo-fecha').pickadate({
 min: new Date(),
 max: new Date(2025, 11, 31),
 disable: [
   1,                     // Desactiva todos los lunes.
   [2025, 4, 15]          // Desactiva el 15 de mayo de 2025.
 ]
});

Resolución de problemas frecuentes

El calendario no aparece en dispositivos móviles

Verificar que se hayan incluido todos los archivos CSS del tema y que no haya reglas display: none propias que oculten el contenedor generado por la librería.

El formato de fecha no se aplica

Revisar la cadena de formato según la documentación oficial. Los tokens como yyyy, mm y dd deben escribirse en minúsculas y sin espacios incorrectos.

Conflicto con otras librerías de jQuery

var pickerOriginal = $.fn.pickadate.noConflict();
$.fn.selectorFecha = pickerOriginal;

Compilación y desarrollo

pickadate.js utiliza Grunt como sistema de tareas. Después de clonar el repositorio, los pasos habituales son:

1. Instalar dependencias: npm install
2. Modo desarrollo con recarga automática: grunt develop
3. Generar paquete de distribución minificado: grunt package
4. Ejecutar pruebas: grunt test