Date Picker — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::DatePicker;
2
3DatePicker::new(
4    self.demo_calendar("dp-disabled", cx),
5)
6.label("Date")
7.is_disabled(true)

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

Anatomy

Rust types

DatePicker

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

Customization

Appearance builders and theme tokens Date Picker uses.

Styling

Date Picker styling
Style	Description
`wrapper flex_col + gap(4px)`	Root field stack uses the four-pixel gap.
`embedded DateField + 24px trigger`	Folds trigger padding into the unified DateField but preserves full-width field radius and 14px type.
`ring_if_focused`	The focus ring switches directly rather than interpolating its shadow.
`16px centered trigger_indicator`	The 16px indicator box matches; caller content retains the built-in hit target.
`picker_panel`	Calendar overlay fill, 12px inset, shadow and pinned 20px radius match.

API reference

Builders

Date Picker builders
Builder	Type	Default	Description
`value(date, cx)`	`date, cx`	—	Writes the controlled date into the caller-owned CalendarState.
`default_value(date)`	`date`	—	Seeds the uncontrolled date once without fighting later edits.
`on_change(callback)`	`Fn(value: DateValue \| null) -> ()`	—	Reports valid field edits and calendar selections.
`is_open(bool)`	`bool`	—	Controls the 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 the field and trigger from interaction and form submission.
`is_read_only(bool)`	`bool`	`false`	Keeps the date focusable while suppressing edits, opening and selection.
`is_required(bool)`	`bool`	`false`	Blocks native form submission while empty and focuses the editable field.
`is_invalid(bool)`	`bool`	—	Forces invalid field and calendar state.
`validate(callback)`	`Fn(value: DateValue \| null) -> ValidationError \| true \| null`	—	A callback supplies one optional validation message; does not expose structured ValidationError object.
`validation_behavior(ValidationBehavior)`	`ValidationBehavior`	`ValidationBehavior::Native`	Selects blocking native validation or non-blocking ARIA-style validation.
`validation_errors(errors)`	`errors`	—	Server messages take precedence and mark the field invalid; independently composed FieldError message 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 range.
`first_day_of_week(Weekday)`	`Weekday`	`Weekday::Locale`	The 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 calendar selection dismisses the popover; callback-valued policy is not represented.
`auto_focus(bool)`	`bool`	`false`	Focuses the editable date field on first render.
`name(text)`	`text`	—	Submits the displayed date text under this name.
`content(render)`	`AnyElement \| Fn(values: DatePickerRenderProps) -> 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.
`fixed BottomStart`	`Placement`	`Placement::Bottom`	The monolithic picker uses bottom-start placement and does not expose an independent popover builder.

Parts

Date Picker parts
Part	Description
`DatePicker`	Root state owner and focus-within scope with a system-regionally formatted DateField.
`DatePicker`	Separate keyboard and pointer action inside the date field suffix.
`DatePicker`	Default or caller-supplied 16px trigger glyph.
`DatePicker`	Bottom-start overlay containing the Calendar.

States

Date Picker states
Builder	State	Description
`controlled/open overlay state`	`Open`	Mounts the calendar overlay and hands open state to replacement content.
`close_on_blur focus scope`	`Focus within`	Tracks focus across the editable field, trigger and calendar.
`trigger focus ring + DatePickerRenderState`	`Focus visible`	Draws the trigger ring 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 the field focusable while making field, trigger and calendar inert.
`is_required(bool)`	`Required`	Marks the label and blocks empty native submission.
`resolved DatePicker validity`	`Invalid`	Combines controlled, server, custom, syntax and date-constraint validation.

Calendar Date Field Date Range Picker Range Calendar Time Field