Tipo 01
Calendario (modal)
Se abre en un diálogo sobre la pantalla.
Componentes Selectores de fecha
Selectores de fecha
El selector de fecha permite elegir un día o un rango en un calendario, sin escribir la fecha a mano.
Uso
Úsalo para fechas cercanas que el usuario elige mirando el calendario: una cita, una entrega, una reserva.
- Fechas próximas en un calendario
- Ver el día de la semana al elegir
- Fechas lejanas y conocidas, como la de nacimiento: es más rápido escribirla
- Solo el año o el mes: usa una lista
Principios
1
Visual
Se ve el mes completo y el día de la semana.
2
Restringido
Los días no válidos aparecen deshabilitados.
3
Confirmable
En celular se confirma con "Aceptar".
Tipos
dd/mm/aaaa
Tipo 02
Campo con ingreso de texto
El usuario escribe la fecha en formato dd/mm/aaaa.
Anatomía
123
- Encabezado con la fecha elegida
- Selector de mes
- Días de la semana
- Día seleccionado
- Día de hoy
- Botones de confirmar y cancelar
Comportamiento
- El día de hoy aparece con un círculo de borde.
- El día elegido se rellena con el color principal y actualiza el encabezado.
- Las flechas cambian de mes; en web también funcionan las teclas.
Medidas
| Medida | Valor de referencia |
|---|---|
| Celda de día | 40 × 40 dp aprox. |
| Ancho del diálogo (celular) | aprox. 328 dp |
| Encabezado | texto de 32 sp |
| Botones | texto, abajo a la derecha |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Grilla
role="grid" y navegación con flechas.
Nombre completo
Cada día anuncia "martes 13 de octubre".
Alternativa
Permite escribir la fecha en un campo.