Date Range V2

DateRangeV2 stores { from, to, preset, timezone }. A recognized preset rebuilds from and to on refresh. CUSTOM keeps the stored bounds. Rolling, calendar, and fixed drafts stay independent, so switching tabs does not convert one into another.

Each box is one config field. presets adds a Presets mode when the list is not empty. timezone: false hides the timezone row.

Presets

Pass config.presets to add a Presets mode. Each preset is the date range picker shape: label, value, getRange, and group (recommended, relative, or calendar). The select is grouped by group. getRange receives { timezone } for the zone selected in the picker, and again on reload from PRESET_ID|TIMEZONE. A preset that ignores the argument keeps its own dates. Apply stores value, that timezone, and the dates from getRange. An id in this list wins over a built-in id with the same name.

Filter field

FilterGroup is the out-of-the-box path. A sticky FilterFieldTypes.DateRangeV2 option keeps Rolling, Calendar, and Fixed on the built-in query. Presets in filterFieldConfig.presets reload through getRange(). calendarProps.weekStartsOn is used when a calendar week is read back, and it defaults to Monday. Apply and clear update the timeframe query param through the filters router. The value below is location.search.

Custom parser

parser on the filter option replaces the built-in query for that field. It has to read and write every mode the picker can apply. The parser in this example only accepts PREVIOUS_3_DAYS and PREVIOUS_14_DAYS.

API reference

Prop	Required	Default	Type
value	false		DateRangeV2Value
onValueChange	true		(value: DateRangeV2Value | undefined) => void
config	false		DateRangeV2Config
disabled	false	false	boolean