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

Date range

Usage

Use DateRangeInput when the operator commits a span of days: a report window, a created-between filter, a shift range. The value is { start, end } of local dates. Do not build the span from two DateInputs unless the two dates are unrelated. Before, After and Between are modes on DateRangeInput: Before keeps an end, After keeps a start, and Between keeps both. The trigger shows a read-only formatted string; pick dates on the calendar. Pass one modes entry to hide the strip. type DateRangeInputType.DateTime adds bordered time fields under the calendar (one for Before/After, two for Between), each with a clock icon. Modes require confirm. Reset restores the value held when the popover opened and stays open. Clear empties the draft and stays open. Escape and an outside press close without committing. Apply is the only primary action; Reset and Clear are secondary, not destructive. minRangeDays and maxRangeDays pass through to Calendar. When the start day moves and the end would break the limit, the end clamps. Violations show rangeSpanError and block Apply. For type DateRangeInputType.DateTime, a Between range defaults its times to 00:00 on the start day and 23:59 on the end day. Times use a 24-hour clock unless hourCycle opts into 12-hour. For ui-calendar disablePastDates and disableFutureDates, use createAdvancedDateRangeDisabledForMode with isDateDisabledForMode and the same referenceDate as today. Use disableFuture on the field when every mode must block future days.
Previous
Event Recurrence Picker / Accessibility
Next
Advanced Date Range Picker / API and Development