Tipo 01
Reloj (dial)
Se toca la hora sobre un reloj circular.
Componentes Selectores de hora
Selectores de hora
El selector de hora permite elegir una hora en un reloj o escribiéndola, sin errores de formato.
Uso
Úsalo para programar horas: una clase, una cita, una alarma.
- Elegir horas y minutos
- Evitar errores de formato (a.m./p.m.)
- Duraciones ("2 horas"): usa un campo numérico
- Horas exactas al segundo
Principios
1
Visual
El reloj muestra la hora como se ve en la vida real.
2
Por partes
Primero la hora, luego los minutos.
3
Formato claro
Se ve si es a.m. o p.m., o se usa formato de 24 h.
Tipos
:
Tipo 02
Ingreso de texto
Dos campos: hora y minutos.
Anatomía
123
- Encabezado con la hora elegida
- Selector a.m. / p.m.
- Reloj (dial)
- Manecilla
- Botones de confirmar
Comportamiento
- Al elegir la hora, el reloj cambia solo a los minutos.
- La manecilla se mueve hasta el número tocado.
- En web conviene ofrecer también el ingreso por teclado.
Medidas
| Medida | Valor de referencia |
|---|---|
| Diámetro del reloj | 256 dp aprox. |
| Números | círculos de 48 dp de área táctil |
| Encabezado | hora en 56 sp aprox. |
| Diálogo | ancho aprox. 328 dp |
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
Alternativa con teclado
Permite escribir la hora.
Nativo en web
ya es accesible.
Anuncia la hora
aria-live en el encabezado al cambiar.