Calendar
El componente de calendario ayuda a introducir o visualizar una fecha de manera fácil y sencilla.
Utilizamos el componente calendario para representar visualmente una fecha y proporcionar los medios adecuados para su representación en formularios o bases de datos, teniendo en cuenta estas observaciones:
- Es útil cuando se necesita elegir un día cercano a la fecha actual o cuando el contexto como el día de la semana, días festivos, etc. pueden ayudar a elegir la mejor opción.
- Inhabilita las opciones de fecha que no están disponibles.
- No es recomendable utilizarlo para seleccionar un día concreto en el tiempo, como la fecha de nacimiento, por ser una fecha lejana en el tiempo y la navegación por el componente ser complicada. Se recomienda usar un conjunto de selectores desplegables (select) para este caso.
Uso correcto | Uso incorrecto |
![]() | ![]() |
Utilizamos un grupo de selectores para seleccionar una fecha lejana a la actual. | No es buena opción un selector de calendario para seleccionar fechas indeterminadas en el tiempo. |

Letra | Elemento | Descripción |
A | Indicador de mes | Informa sobre el mes en el que está posicionado el calendario. |
B | Indicador semanal | Informa sobre el día de la semana. |
C | Indicador de día | Da información sobre los días que componen el mes visualizado. |
D | Día seleccionado | Resalta la selección efectuada. |
E | Controlador | Permite navegar por los meses adyacentes al visualizado. |
F | Días fuera del mes visualizado | Visualiza los días de los meses adyacentes al visualizado. |
G | Día actual | Indica el día actual. |

Letra | Estado | Descripción |
1 | Default | Estado por defecto. |
2 | Festivos | Ofrece información sobre los días festivos. |
3 | Active | Se ha seleccionado una fecha en el calendario. |
4 | Adyacente | Marca la fecha seleccionada en un mes adyacente. |
Última actualización 1yr ago