Calendario

Campo que permite desplegar un calendario para seleccionar una fecha o rango de fechas. Basado en la librería Cally

Índice de apartados de esta página

• Anatomía
• Variantes de calendario
• Accesibilidad

Anatomía #

1. Entrada de texto: Permite escribir la fecha en lugar de seleccionarla y posee las mismas variantes y elementos que un campo de texto. La fecha debe estar en el mismo formato que se indica.
2. Botón desplegable: Se encuentra dentro del campo y despliega un contenedor con el calendario que permite seleccionar la fecha. En su lugar también puedes utilizar una variante con etiqueta de texto al lado del campo.
3. Calendario: Selector visual que permite elegir uno, varios días o un rango de fechas concreto. Basado en la librería Cally
4. Botones: Cuando se acepta la fecha seleccionada, se escribe automáticamente en la entrada de texto con el formato adecuado. Cancelar o pulsar fuera cierra el desplegable sin guardar la fecha.

Variantes de calendario #

Deberás configurarlo a partir de la documentación de Cally

Fecha única o múltiple #

Podrás seleccionar uno o varios días.

Rango de fechas #

Pulsa primero el día de incio y después el de fin para seleccionar un rango de fechas.

Selector de año #

Si necesitas navegar a otro año disinto puedes utilizar un selector que te permita elegirlo.

Múltiples meses #

A veces necesitas seleccionar varios días o un rango de fechas que abarca varios meses. En esta variante se pueden visualizar dos meses consecutivos.

Formato desplegable #

Es el caso de uso más habitual: un desplegable dentro de un campo en el contexto de un formulario. Hereda las mismas variantes que el resto de inputs.

Accesibilidad #

Cómo funciona #

• Elemento <input> con la misma lógica que conlleva el componente entrada de texto. Es necesario extender la descripción del formato de fecha para lectores de pantalla con un .sr-only. A su derecha se encuentra un elemento <button> con la misma lógica que conlleva el componente desplegable. Cuando el botón solo tiene un icono, dispone de una etiqueta con .sr-only que anuncia "Seleccionar fecha".
• El contenedor desplegable tiene por defecto una lista <ul> con dos <button> que permiten aceptar o cancelar la selección, además de un caller que llama al calendario. Este componente se encaja en un contenedor con role=group, un aria-labelledby que apunta a un texto con el mes y año actuales. La cabecera tiene un aria-live=polite y un aria-atomic=true que indica que este contenido es autónomo y permite ser actualizado sin afectar a los anteriores. Los botones de mes anterior y siguiente siguen la lógica del componente botón y tienen etiquetas que describen la acción para lectores de pantalla. El texto de año tiene un aria-hidden=true para evitar información redundante y puede ser sustituido por un selector para elegir año.
• El listado de días se encuentra dentro de un elemento <table> y las iniciales de los días de la semana en una fila de cabecera <thead>, junto con una etiqueta que anuncia el nombre completo para lectores de pantalla. Cada uno de los días es un <button>, con un aria-pressed que indica si está seleccionado y un aria-label que describe el mes al que corresponde el día.
• Cuando una persona navegue con teclado puede tabular entre las flechas de navegación de meses y moverse entre la tabla de días con las flechas del teclado. La selección de días se realiza con la tecla enter o el espacio. También es posible avanzar o retroceder de mes desde la tabla de días saliendo por los bordes superior e inferior.

Más información en la documentación de Cally y en el apartado accesibilidad de formularios.