Analytics

Date range picker panel

The preset list and calendar behind the reporting date control. Exports its presets, labels and resolver.

Available

Ports as-is

Examples

Rendered live from the maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.

Date range picker panel

Rendered live from Storybook

Open

Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.

Props

The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.

Prop	Type	Default	Description
`open`*	`boolean`	—	Undocumented — add TSDoc to the prop in the library.
`onClose`*	`() => void`	—	Undocumented — add TSDoc to the prop in the library.
`onApply`*	`(startDate: Date, endDate: Date, preset?: string) => void`	—	Undocumented — add TSDoc to the prop in the library.
`initialStartDate`	`Date`	—	Undocumented — add TSDoc to the prop in the library.
`initialEndDate`	`Date`	—	Undocumented — add TSDoc to the prop in the library.
`initialPreset`	`string`	—	Undocumented — add TSDoc to the prop in the library.
`anchorRef`	`React.RefObject<HTMLDivElement>`	—	Element the panel positions itself under. Omit and it falls back to a fixed inset near the top of the viewport — which is what the stories use, since a ref to a live toolbar is app state.
`now`	`Date`	`DATE_RANGE_DEFAULT_NOW`	Reference "today": drives the presets and the today ring on the calendars.
`epoch`	`Date`	`DATE_RANGE_DEFAULT_EPOCH`	Start of the "All time" range.
`presets`	`DateRangePresetOption[]`	`DATE_RANGE_PRESETS`	Override the preset sidebar — pass `[]` to hide it entirely.
`usePortal`	`boolean`	`true`	Render into `document.body` (the app's behaviour). Set false to keep the panel in place — useful in a docs block, where a portalled overlay covers the page.
`showOverlay`	`boolean`	`true`	Draw the blurred scrim behind the panel.
`className`	`string`	—	Merged onto the panel shell. The panel is `fixed` and positions itself off `anchorRef`; pass `!static` here to drop it into normal flow instead — that is how the gallery stories put several panels side by side.
`overlayClassName`	`string`	—	Undocumented — add TSDoc to the prop in the library.

Reference

Transcribed from the component audit. If this disagrees with the source, the source is right.

Source: src/components/analytics/DateRangePickerPanel.tsx
Portability: Copies across unchanged — only the utils import path moves.
Notes: Takes a now value so the presets resolve against a fixed date rather than the clock.