Warning: Undefined array key "typ" in /srv/vhost/diaridigital.net/home/html/sourcecode/main/articles.php on line 18

flatpickr, selector de fecha y hora

23-11-2022
Tiempo de lectura: 1 minutos

flatpickr es un selector de fecha y hora muy ligero y de gran potencia que permite múltiples formatos de entrada orientados al usuario.

Instalación

Para un entorno sin módulos, utilizamos la última versión de jsdelivr o descargamos los archivos desde el proyecto en GitHUb

<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

HTML

Con esto ya podemos crear un input en HTML para que el usuario entre la fecha

Fecha <input id="myID" class="flatpickr" type="text" 
placeholder="Selecciona la fecha">

JavaScript

Finalmente, en JavaScript utilizamos un selector para identificar el input sobre el que acturá flatpickr. En este ejemplo habilitamos la entrada de horas y minutos y damos un formato de fecha para mostrar

Calendario y fecha

<script>
    flatpickr("#myID", {
        enableTime: true,
        dateFormat: "Y-m-d H:i"
        });
</script>

En este otro ejemplo permitimos un rango de fechas, que el usuario puede seleccionar de forma dinámica utilizando el ratón sobre el calendario o marcando el dia de inicio y final

Selección de un rango de fechas

<script>
    flatpickr("#myID", {
        mode: "range",
        dateFormat: "Y-m-d"
        });
</script>

Sobre estos calendarios tenemos multitud de opciones, como desabilitar dias, dar una fecha mínima o máxima, múltiples fechas, etc.

Formatos

Una de las posibilidades que ofrece flatpickr es la de agrupar elementos junto al input de la fecha para disponer de iconos con eventos que actúan en la entrada de datos, por ejemplo, data-toggle permite mostrar u ocultar el calendario. data-clear, borra la fecha.

Este ejemplo de tres elementos dentro de un

<div class="flatpickr">
    
    <input type="text" placeholder="Select Date.." data-input>

    <a class="input-button" title="toggle" data-toggle>
        <i class="icon-calendar"></i>
    </a>

    <a class="input-button" title="clear" data-clear>
        <i class="icon-close"></i>
    </a>
</div>

Y este código

<script>
    flatpickr({
        wrap: true
    });
</script>

Nos da esta composición

Selector con acciones adicionales

Referencias

Web de flatpickr
https://flatpickr.js.org
GitHub
https://github.com