TimePicker Enhanced Demo

Test the enhanced TimePicker with mask input, auto-selection, and improved keyboard navigation.

🎯 New Features

  • Fixed Mask: Colon (:) is always present and cannot be deleted
  • Auto-Selection: Click on hours selects "HH", click on minutes selects "MM"
  • Enhanced Navigation: Tab moves between hour → minute → icon
  • New Keyboard Controls:
    • ↑↓ arrows: Change hours only
    • Page Up/Down: Change minutes only
    • Numbers: Direct input with smart formatting

🧪 Testing Instructions

Try these interactions to test the enhanced functionality:

  1. Click in the hour area - notice how "HH" gets selected
  2. Click in the minute area - notice how "MM" gets selected
  3. Try typing numbers - see how they replace the entire selected area
  4. Use ↑↓ arrows to change hours, Page Up/Down for minutes
  5. Use Tab to navigate between hour → minute → picker icon
  6. Try deleting characters - the colon should remain fixed

The native time picker availability depends on your browser and operating system.

TimePicker - Design System

Selector d'hora amb suport per tema clar/fosc, estats hover/focus i accessibilitat completa. Utilitza l'element natiu HTML5 time input per màxima compatibilitat.

TimePicker bàsic

Selector d'hora en la seva forma més simple amb valor per defecte.

Hora seleccionada: Cap hora seleccionada

TimePicker personalitzat

TimePicker amb hora inicial personalitzada i ID específic.

Hora personalitzada: 14:30

TimePicker desactivat

TimePicker en estat desactivat per mostrar l'estat disabled.

Aquest selector està desactivat

Propietats disponibles

Totes les propietats que accepta el component TimePicker.

Props del TimePicker:

  • timeDefault?: Date - Hora per defecte (per defecte: new Date())
  • dataTestId?: string - ID per a testing (per defecte: "time-picker")
  • onTimeSelected?: (time: Date) => void - Callback quan es selecciona una hora
  • ariaLabel?: string - Etiqueta d'accessibilitat (per defecte: "Seleccionar hora")
  • id?: string - ID personalitzat de l'element
  • disabled?: boolean - Estat desactivat (per defecte: false)
  • className?: string - Classes CSS addicionals