Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Calendar
  2. Advanced Date Time Range Picker
  3. API and Development

Date and time

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
One instant is DateTimeInput from @prepared911/ui/date-time-input. A span of days is DateRangeInput with the default Before, After, and Between strip. A span of instants is the same field with type DateRangeInputType.DateTime.
DateTimeInput props
PropMeaning
labelRequired name of the group.
value / defaultValueA Date instant, or null.
onValueChangeNext instant and details.reason.
timeZoneIANA zone the segments read and write.
min / max / disableFutureBounds on the instant.
hourCycle24-hour unless you opt into 12-hour or 11-hour.
stepMinutes between times in the list.
confirmRequires 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.
DateRangeInput date-and-time props
PropMeaning
typeDateRangeInputType.DateTime for instants; default is days only.
timeZoneIANA zone for panel times and committed instants. The read-only trigger shows formatted dates only, with no zone label.
timeSegmentLabelsNames of hour and minute segments in the panel time fields. Required with type DateTime.
timeFieldLabelsNames of From and To time fields under the calendar. Required with type DateTime.
modeLabels / modeSelectLabel / applyLabel / resetLabelDefault strip and confirm footer, same as a day range.
value / onValueChange{ start, end } with Date instants; open ends are null.
Import
Previous
Advanced Date Time Range Picker / Usage
Next
Advanced Date Time Range Picker / Accessibility
On this page
DateTimeInput props
DateRangeInput date-and-time props
Import