Prepared Docs

Overview

AdvancedDateTimeRangePicker is AdvancedDateRangePicker with time-of-day fields attached. Operators choose a mode—Before, After, Between—then set calendar bounds and the accompanying start / end times in the same panel. Use it when both the date and the time-of-day matter to the query or workflow (e.g. "incidents after 21:00 on Mar 3" or "transmissions between 07:30 and 08:30 across a two-day window").

The committed value is an AdvancedDateTimeRangeValue that mirrors the date picker's discriminated union, carrying the same mode discriminator plus time strings for the relevant bounds.

–

When to use

Logging-recorder radio dialogue search. Dispatch operators narrow transmissions by an exact clock window across one or more days: see the radio/stores/talkGroupPageStore and the logging-recorder filter hooks, which both store an AdvancedDateTimeRangeValue.
Incident replay and audit queries. "Everything after dispatch but before the first transport" needs both the day and the minute.
Operational constraints. Scheduling rules that change between shift boundaries—an operator thinking in "after the night shift started"—map cleanly onto Before / After with time.

When not to use

Time-of-day doesn't matter. Drop to AdvancedDateRangePicker; the time fields are noise.
Time-of-day only. Use AdvancedTimeRangePicker for same-day shift queries.
Contiguous calendar spans without inequality. Use DatePicker in Range mode or DateTimePicker if time is part of it.
Repeating windows. Use EventRecurrencePicker: operators shouldn't have to recreate the rule per day.

Composition

Mode strip. Same SegmentedControl as AdvancedDateRangePicker (Before / After / Between). Hidden when rangeOnly is true.
Date pane. The underlying AdvancedDateRangePicker's grid.
Time pane. TimePicker for single-bound modes; TimeRangeInputs for Between. Default times are 00:00 for the start bound and 23:59 for the end bound so "just pick a day" queries degrade gracefully.
Optional Apply / Reset. onApply defers commits; built-in Reset clears both date and time state.

Types

Mode	Selection	Defaults
`Before`	one date + end time	end time defaults to `23:59`
`After`	one date + start time	start time defaults to `00:00`
`Between`	start / end dates + start / end times	`00:00` – `23:59`

Switching modes keeps compatible fields populated (the Between end becomes the Before bound) so operators don't lose their in-progress selection.

Behavior and states

Deferred commits. With onApply, the picker tracks state internally and only fires onApply on confirmation; without it, every date or time change fires onChange.
Default time padding. When the operator picks a date without touching times, the committed values pad to 00:00 / 23:59 so the filter captures the whole day.
Constraint knobs. disableFuture, disablePastDates, and disableFutureDates cascade to the date grid via MonthCaption.
Popover-hosted. Like its sibling, this picker has no trigger. The consuming surface owns the popover and the summary shown outside it.

Customization

rangeOnly. Hides the mode strip; the picker becomes a "Between with times" control.
hideMonthYearSelect. Narrow popovers lose the month / year Selects in favor of chevrons.
disableFutureDates / disablePastDates. Pick the narrowest constraint that matches the query shape.

Best practices

Surface the committed constraint in a pill or summary line outside the popover so operators can confirm "after Mar 3, 21:00" without reopening.
Use the 00:00 / 23:59 defaults to make "whole day" queries effortless; document when they apply if your product visualizes them.
Pair with onApply in filter surfaces so changing date then time doesn't fire two queries.
Persist the mode and full value in URL state when the query is shareable (see useRadioFilters for an example that round-trips the full AdvancedDateTimeRangeValue).

Don't

Don't use this picker when the time-of-day never matters: a date-only picker is lighter and less error-prone.
Don't dispatch on partial selections; validate that both bounds exist before enabling Apply.
Don't drop the mode strip visually without also passing rangeOnly; hiding it via CSS breaks the committed value shape.

Accessibility

Keyboard and screen reader behavior come from the mode SegmentedControl, the date DatePicker, and the native time <input type="time"> inputs. The component does not announce mode changes or the committed value; the surrounding surface should. See the Accessibility page for the contract, including how focus moves between the mode strip, date grid, and time fields.

Advanced Date Range Picker: same modes without time-of-day.
Date Time Picker: contiguous range with time, without the inequality mode strip.
Time Picker: the time input primitive used for single bounds.

Advanced Date Range Picker / Accessibility

Advanced Date Time Range Picker / API and Development

Overview

The committed value is an AdvancedDateTimeRangeValue that mirrors the date picker's discriminated union, carrying the same mode discriminator plus time strings for the relevant bounds.

–

When to use

Logging-recorder radio dialogue search. Dispatch operators narrow transmissions by an exact clock window across one or more days: see the radio/stores/talkGroupPageStore and the logging-recorder filter hooks, which both store an AdvancedDateTimeRangeValue.
Incident replay and audit queries. "Everything after dispatch but before the first transport" needs both the day and the minute.
Operational constraints. Scheduling rules that change between shift boundaries—an operator thinking in "after the night shift started"—map cleanly onto Before / After with time.

When not to use

Time-of-day doesn't matter. Drop to AdvancedDateRangePicker; the time fields are noise.
Time-of-day only. Use AdvancedTimeRangePicker for same-day shift queries.
Contiguous calendar spans without inequality. Use DatePicker in Range mode or DateTimePicker if time is part of it.
Repeating windows. Use EventRecurrencePicker: operators shouldn't have to recreate the rule per day.

Composition

Mode strip. Same SegmentedControl as AdvancedDateRangePicker (Before / After / Between). Hidden when rangeOnly is true.
Date pane. The underlying AdvancedDateRangePicker's grid.
Time pane. TimePicker for single-bound modes; TimeRangeInputs for Between. Default times are 00:00 for the start bound and 23:59 for the end bound so "just pick a day" queries degrade gracefully.
Optional Apply / Reset. onApply defers commits; built-in Reset clears both date and time state.

Types

Mode	Selection	Defaults
`Before`	one date + end time	end time defaults to `23:59`
`After`	one date + start time	start time defaults to `00:00`
`Between`	start / end dates + start / end times	`00:00` – `23:59`

Switching modes keeps compatible fields populated (the Between end becomes the Before bound) so operators don't lose their in-progress selection.

Behavior and states

Deferred commits. With onApply, the picker tracks state internally and only fires onApply on confirmation; without it, every date or time change fires onChange.
Default time padding. When the operator picks a date without touching times, the committed values pad to 00:00 / 23:59 so the filter captures the whole day.
Constraint knobs. disableFuture, disablePastDates, and disableFutureDates cascade to the date grid via MonthCaption.
Popover-hosted. Like its sibling, this picker has no trigger. The consuming surface owns the popover and the summary shown outside it.

Customization

rangeOnly. Hides the mode strip; the picker becomes a "Between with times" control.
hideMonthYearSelect. Narrow popovers lose the month / year Selects in favor of chevrons.
disableFutureDates / disablePastDates. Pick the narrowest constraint that matches the query shape.

Best practices

Surface the committed constraint in a pill or summary line outside the popover so operators can confirm "after Mar 3, 21:00" without reopening.
Use the 00:00 / 23:59 defaults to make "whole day" queries effortless; document when they apply if your product visualizes them.
Pair with onApply in filter surfaces so changing date then time doesn't fire two queries.
Persist the mode and full value in URL state when the query is shareable (see useRadioFilters for an example that round-trips the full AdvancedDateTimeRangeValue).

Don't

Don't use this picker when the time-of-day never matters: a date-only picker is lighter and less error-prone.
Don't dispatch on partial selections; validate that both bounds exist before enabling Apply.
Don't drop the mode strip visually without also passing rangeOnly; hiding it via CSS breaks the committed value shape.

Accessibility

Advanced Date Range Picker: same modes without time-of-day.
Date Time Picker: contiguous range with time, without the inequality mode strip.
Time Picker: the time input primitive used for single bounds.