Date & Time Picker
Selector de fecha y hora
Un selector de fecha y hora ayuda a elegir una fecha, hora o rango válidos. Puede mostrar un calendario o un reloj.
Un ejemplo real
Una página de reservas bloquea días completos. Muestra la zona horaria local al lado de cada cita.
Partes principales
- 01Etiqueta persistente
- 02Input control
- 03Hint or format
- 04Validation message
Úsalo cuando
Úselo cuando los límites de fecha o ver un calendario puedan ayudar a las personas a evitar errores.
No lo uses cuando
Permite que las personas escriban fechas familiares, como cumpleaños. Nunca los hagas buscar en un calendario.
Nombre usado en código
<input type="date"> / <input type="time"> Antes de lanzarlo
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome: Complete the task with Selector de fecha y hora (Date & Time Picker). User context: Una página de reservas bloquea días completos. Muestra la zona horaria local al lado de cada cita. Recommended pattern: Selector de fecha y hora (Date & Time Picker). Why it fits: Úselo cuando los límites de fecha o ver un calendario puedan ayudar a las personas a evitar errores. Do not use it when: Permite que las personas escriban fechas familiares, como cumpleaños. Nunca los hagas buscar en un calendario. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Ningún estándar oficial único controla todo el término. Su significado puede cambiar según equipos, plataformas o marcos. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Selector de fecha y hora (Date & Time Picker) is used now. Definition: Un selector de fecha y hora ayuda a elegir una fecha, hora o rango válidos. Puede mostrar un calendario o un reloj. Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.