Date and time

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

One instant is DateTimeInput from @prepared911/ui/date-time-input. A span of days is DateRangeInput, which opens on Before, After, and Between. A span of days and times is the same field with type DateRangeInputType.DateTime.

Props

Prop	Meaning
`label`	Required name of the group.
`value` / `defaultValue`	A `Date` instant, or `null`.
`onValueChange`	Next instant and `details.reason`.
`timeZone`	IANA zone the segments read and write.
`min` / `max` / `disableFuture`	Bounds on the instant.
`hourCycle`	24-hour unless you opt into 12-hour or 11-hour.
`step`	Minutes between times in the list.
`confirm`	Requires `applyLabel` and `resetLabel`. Reset restores the value held when the popover opened and stays open. Clear, when `clearLabel` is set, empties the draft and stays open. Escape and an outside press close without committing. Apply is the only primary action.

Import

Advanced Date Time Range Picker / Usage

Advanced Date Time Range Picker / Accessibility

On this page

Props

Import

Date and time

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Props

Prop	Meaning
`label`	Required name of the group.
`value` / `defaultValue`	A `Date` instant, or `null`.
`onValueChange`	Next instant and `details.reason`.
`timeZone`	IANA zone the segments read and write.
`min` / `max` / `disableFuture`	Bounds on the instant.
`hourCycle`	24-hour unless you opt into 12-hour or 11-hour.
`step`	Minutes between times in the list.
`confirm`	Requires `applyLabel` and `resetLabel`. Reset restores the value held when the popover opened and stays open. Clear, when `clearLabel` is set, empties the draft and stays open. Escape and an outside press close without committing. Apply is the only primary action.

Import

Advanced Date Time Range Picker / Usage

Advanced Date Time Range Picker / Accessibility

On this page

Props

Import