Roadmap GitHub

Time Picker

A text input with a popup list of selectable times. Commits a hidden ISO HH:mm value; shows 12-hour or 24-hour display.

<rhx-time-picker>

Examples

Basic

Business hours, 15-min, 24-hour

Properties

Property Type Default Description
rhx-for ModelExpression - Binds TimeOnly/DateTime for two-way model binding
name string - Form field name for the hidden ISO (HH:mm) value
rhx-placeholder string - Placeholder for the text input
rhx-min string - Earliest time, HH:mm
rhx-max string - Latest time, HH:mm
rhx-step int 30 Minutes between options
rhx-12hour bool true 12-hour (9:30 AM) vs 24-hour (09:30) display
rhx-format string - .NET time format string for display (overrides 12/24h)
rhx-size string medium small, medium, large
rhx-disabled bool false Disable the control
rhx-readonly bool false Render read-only (value shown, list cannot be opened)

Accessibility

  • The input is a role="combobox" with aria-haspopup="listbox"/aria-expanded; the popup is role="listbox" with role="option" items.
  • Keyboard: Down/Up move, Home/End jump, Enter selects, Escape closes, printable keys type-ahead by label; the active option is tracked via aria-activedescendant.
  • The hidden value is ISO HH:mm (24-hour) for reliable model binding regardless of display mode.