Datepicker
Paquete: @tiendana/web-foundation
Estilos del campo de fecha tdn-input-date y de su calendario desplegable. En Angular los renderiza TdnInputDate; esta página documenta las clases CSS y cómo se apila el calendario sobre la página.
Características
✅ Calendario fuera del formulario - Se aloja en document.body con posición fija
✅ Apilado coherente - Usa --z-index-dropdown, el mismo nivel que la lista de Select
✅ Posición adaptable - Debajo del campo, encima (ontop) o centrado a pantalla (fullscreen)
✅ Rango de fechas - Estilos para mostrar desde - hasta en el campo
Demo
Campo de fecha cerrado dentro de un tdn-form-element.
Ver código
Apilado del calendario
.tdn-input-date__dropdown tiene position: fixed y z-index: var(--z-index-dropdown) (1000). Mientras está abierto, el componente lo mueve a document.body, así que compite con el resto de la página en el mismo contexto de apilamiento que la lista de un select.
| Token | Valor |
|---|---|
--z-index-dropdown | 1000 |
--z-index-modal-backdrop | 1040 |
--z-index-modal | 1050 |
Como el calendario abierto está en el body, una regla como .mi-formulario .tdn-input-date__dropdown no coincide, y settings.classes solo llega al host. Usa un selector que se sostenga solo.
Posición
El componente calcula la posición desde el rectángulo del campo y marca el resultado con clases:
| Clase | Dónde | Efecto |
|---|---|---|
.ontop | Host y calendario | Se abrió por encima del campo; la sombra del calendario se invierte |
.fullscreen | Calendario | No cabe ni arriba ni abajo: se centra en la ventana (top: 50%, left: 50%) |
Referencia de clases
| Clase | Descripción |
|---|---|
.tdn-input-date | Host del campo |
.tdn-input-date__control | Zona clicable que muestra la fecha formateada, con altura --input-max-height menos 18px |
.tdn-input-date__control .range | Presentación del rango: tres columnas (desde, divisor, hasta) |
.tdn-input-date__controls | Contenedor de botones a la derecha |
.tdn-input-date__clear | Botón para limpiar (fondo --color-error) |
.tdn-input-date__chevron | Chevron del campo |
.tdn-input-date__chevron--rotate | Chevron rotado (calendario abierto) |
.tdn-input-date__dropdown | Panel del calendario: fijo, radio de 12px, sombra suave |
.container__main, .container__months | Estructura interna del calendario |
.container__months.columns-2, .columns-3, .columns-4 | Varios meses en columnas |
.container__months.split-view | Muestra los botones de mes anterior y siguiente en cada mes |
.show-week-numbers | Ensancha el mes a 8 columnas para mostrar números de semana (--datepicker-month-width) |
Ver También
TdnInputDate- Componente Angular- Form Element - Contenedor del campo
- Select - Lista desplegable con el mismo nivel de apilado