Roadmap GitHub

Date Picker

A text input with a popup calendar. The month grid is server-rendered; prev/next and the month/year label navigate via htmx. Day selection commits a hidden ISO value.

<rhx-date-picker>

Examples

Basic

Min / Max range

Properties

Property Type Default Description
rhx-for ModelExpression - Binds DateOnly/DateTime for two-way model binding
name string - Form field name for the hidden ISO (yyyy-MM-dd) value
rhx-placeholder string - Placeholder for the text input
rhx-min string - Earliest selectable date (ISO yyyy-MM-dd)
rhx-max string - Latest selectable date (ISO yyyy-MM-dd)
rhx-week-start string mon First day of the week: mon or sun
rhx-format string - .NET format string for the visible display (default: culture short date)
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".
  • The grid uses role="grid" with gridcell days and roving tabindex; arrows move by day/week, PageUp/Down by month, Enter selects, Escape closes.
  • The hidden value is ISO yyyy-MM-dd for reliable model binding; the visible input shows the culture short date.