@get-asset/react
Date Picker
One styled trigger for both jobs: a calendar period or a custom range. The popover puts a segmented Period / Custom switch above the active panel — the period grid or the range calendar. Both edit the provider's single date range, so switching modes changes the view and never the selection. That range is what every date-driven component reports on, so a choice here moves the whole page.
Built on the headless DatePicker compound from @get-asset/sdk.
Preview
Loading preview…
API reference
Root props
| Prop | Type | Default | Description |
|---|---|---|---|
min | CalendarDateString | — | Earliest selectable date, inclusive. Applies to both modes. |
max | CalendarDateString | — | Latest selectable date, inclusive. Applies to both modes. |
mode | "period" | "range" | — | Locks the picker to a single panel and hides the Period / Custom switch. Omitted, both panels are offered. Mount "period" on a surface built around period-over-period comparisons, so the range always names a month, quarter or year. |
disabled | boolean | — | Disables the trigger and both panels. |
className | string | — | Class on the trigger button. |
Modes
Every date-driven component under the provider follows the committed range, unless it was detached with its own dateFrom/dateTo props. Cards that compare against a previous period only do so period-over-period when the range names one, so mount mode="period" on a surface built around those comparisons; a custom range is compared against the same number of days immediately before it.
Opening lands on the mode that matches what is selected: an exact calendar year, quarter, or month opens on Period, anything else on Custom. In Custom the first click picks the start, the second writes both provider dates together, and the third starts a new range; closing mid-pick discards it. In Period a choice applies as it is made and the panel stays open. A fixed mode always opens on its own panel.