Roadmap GitHub

Date & Time Picker

One control binding a single DateTime: a popup with a calendar and a time list. Commits a hidden ISO yyyy-MM-ddTHH:mm value once both date and time are set.

<rhx-datetime-picker>

Examples

Basic

Properties

Property Type Default Description
rhx-for ModelExpression - Binds DateTime for two-way model binding
name string - Form field name for the hidden ISO (yyyy-MM-ddTHH:mm) value
rhx-placeholder string - Placeholder for the text input
rhx-min string - Earliest selectable date (ISO yyyy-MM-dd); bounds the calendar only
rhx-max string - Latest selectable date (ISO yyyy-MM-dd); bounds the calendar only
rhx-week-start string mon First day of the week: mon or sun
rhx-step int 30 Minutes between time options
rhx-12hour bool true 12-hour vs 24-hour time display
rhx-date-format string - .NET date format for display (default: culture short date)
rhx-time-format string - .NET time format for display (overrides 12/24h)
rhx-size string medium small, medium, large
rhx-disabled bool false Disable the control

Accessibility

  • Trigger uses aria-haspopup="dialog"/aria-expanded; the popup is role="dialog" containing the calendar grid and a time listbox.
  • Calendar keyboard (arrows, PageUp/Down for months, Enter to select, Escape to close) works in the popup; the time list is selected by click.
  • The hidden value is ISO yyyy-MM-ddTHH:mm and is committed only once both a date and a time are chosen.