Date Range Picker

Usage

Live example

Rust

1use herogpui::prelude::{DateRangePicker, DateRangeState};
2
3DateRangePicker::new(
4    self.demo_range("drp-disabled", cx),
5)
6.label("Stay")
7.is_disabled(true)

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

DateRangePicker

Date Range Picker is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Date Range Picker uses.

Styling

Date Range Picker styling
Style	Description
`wrapper flex_col + gap(4px)`	Root field stack uses the four-pixel gap.
`embedded DateFields + 24px trigger`	Folds trigger padding into one unified field while preserving full-width geometry and 14px type.
`range separator px(4.) + placeholder color`	Four-pixel horizontal inset and placeholder color around the default hyphen or replacement content.
`16px centered trigger_indicator`	The 16px indicator box matches; caller content retains the built-in hit target.
`picker_panel`	Range calendar overlay fill, 12px inset, shadow and pinned 20px radius match.

API reference

Builders

Date Range Picker builders
Builder	Type	Default	Description
`value(start, end, cx)`	`start, end, cx`	—	Writes the controlled start and end through to the caller-owned DateRangeState.
`default_value((start, end))`	`(start, end)`	—	Seeds the uncontrolled complete range once without fighting later edits.
`on_change(callback)`	`Fn(value: RangeValue<DateValue> \| null) -> ()`	—	Reports valid field edits and completed calendar ranges; the range is read from DateRangeState.
`is_open(bool)`	`bool`	—	Controls the range calendar popover without mutating local open state.
`default_open(bool)`	`bool`	`false`	Seeds uncontrolled popover state.
`on_open_change(callback)`	`Fn(isOpen: bool) -> ()`	—	Reports trigger, selection, Escape, outside-press and focus-departure changes.
`is_disabled(bool)`	`bool`	`false`	Removes both fields and the trigger from interaction and form submission.
`is_read_only(bool)`	`bool`	`false`	Keeps both dates focusable while suppressing edits, opening and selection.
`is_required(bool)`	`bool`	`false`	Blocks native submission until both named range ends are present and focuses the start field first.
`is_invalid(bool)`	`bool`	—	Forces invalid field and range-calendar state.
`validate(callback)`	`Fn(value: RangeValue<DateValue> \| null) -> ValidationError \| true \| null`	—	A callback supplies one optional validation message for the complete range; structured ValidationError objects are not exposed.
`validation_behavior(ValidationBehavior)`	`ValidationBehavior`	`ValidationBehavior::Native`	Selects blocking native validation or non-blocking ARIA-style validation for both fields.
`validation_errors(errors)`	`errors`	—	Server messages take precedence and mark both fields invalid; independently composed FieldError content is unavailable.
`min_value(date)`	`date`	—	Earliest valid field and calendar date.
`max_value(date)`	`date`	—	Latest valid field and calendar date.
`is_date_unavailable(predicate)`	`predicate`	—	Rejects individual dates inside the selected range.
`first_day_of_week(Weekday)`	`Weekday`	`Weekday::Locale`	The range calendar grid defaults from the operating system's regional date preferences through CLDR week data; the local Weekday enum provides an explicit override.
`should_close_on_select(bool)`	`bool`	`true`	The boolean form controls whether a completed calendar range dismisses the popover; callback-valued policy is not represented.
`auto_focus(bool)`	`bool`	`false`	Focuses the editable start field on first render.
`start_name(text)`	`text`	—	Submits the displayed start date under this name.
`end_name(text)`	`text`	—	Submits the displayed end date under this name.
`content(render)`	`AnyElement \| Fn(values: DateRangePickerRenderProps) -> AnyElement`	—	Replacement content receives disabled, invalid, read-only, required, focus and open state.
`trigger_indicator(element)`	`AnyElement`	`AnyElement::CalendarIcon`	Replaces the glyph inside the existing trigger geometry and behavior.
`range_separator(element)`	`AnyElement`	`" - "`	Replaces the text between the two editable date fields.
`fixed BottomStart`	`Placement`	`Placement::Bottom`	The monolithic picker uses bottom-start placement and does not expose an independent popover builder.

Parts

Date Range Picker parts
Part	Description
`DateRangePicker`	Root state owner and focus-within scope with two system-regionally formatted DateFields.
`DateRangePicker`	Separate keyboard and pointer action inside the shared range field.
`DateRangePicker`	Default or caller-supplied 16px trigger glyph.
`DateRangePicker`	Default or caller-supplied separator between the start and end fields.
`DateRangePicker`	Bottom-start overlay containing the RangeCalendar.

States

Date Range Picker states
Builder	State	Description
`controlled/open overlay state`	`Open`	Mounts the range calendar overlay and hands open state to replacement content.
`close_on_blur/content focus scope`	`Focus within`	Tracks focus across both editable fields, the trigger and the calendar.
`focus_visible + DateRangePickerRenderState`	`Focus visible`	Draws keyboard focus and hands keyboard-visible root focus to replacement content.
`is_disabled(bool)`	`Disabled`	Applies disabled opacity and removes editing, opening and submission.
`is_read_only(bool)`	`Read only`	Keeps both fields focusable while making field, trigger and calendar inert.
`is_required(bool)`	`Required`	Marks the label and blocks native submission until both range ends exist.
`resolved DateRangePicker validity`	`Invalid`	Combines controlled, server, custom, syntax and date-constraint validation.

Calendar Date Field Date Picker Range Calendar Time Field