DateRangePicker

When to use

Report filters, analytics date windows, any start/end range selection. Supports Nike bodega locales and preset shortcuts (Today, Last 7 days, etc.).

When NOT to use

Single date only — use MUI DatePicker or Podium date input. Time-of-day ranges — not supported.

Podium primitives composed

• Podium TextField
• Podium Button

Common pitfalls

• Requires peer @mui/x-date-pickers and dayjs.
• Pass locale matching TranslationProvider for consistent formatting.
• onAccept fires only when both start and end are set.

Props

Auto-generated from src/types/DateRangePicker.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

DateRangePickerProps

Prop	Type	Required	Description
compact	boolean	No	Renders a compact (40 px) version of the input fields to match the height of other filter controls. Default: false
defaultValue	DateRange	No	Default date range for uncontrolled mode
hideActionButtons	boolean	No	Hide calendar action buttons (Apply/Cancel). When enabled, the picker auto-closes after a complete range is selected. Default: false
hideShortcuts	boolean	No	Hide the preset shortcuts panel Default: false
locale	string	No	BCP 47 locale for date formatting and calendar localization. DateField automatically adapts input format to the locale. Default: 'en-US'
maxDate	Date | Dayjs | string	No	Maximum selectable date. Accepts a Dayjs, a JS Date, or any dayjs-parseable string (e.g. an ISO 8601 timestamp).
minDate	Date | Dayjs | string	No	Minimum selectable date. Accepts a Dayjs, a JS Date, or any dayjs-parseable string (e.g. an ISO 8601 timestamp).
onAccept	(range: FormattedDateRange) => void	No	Fires when the user confirms the selection (Apply or Go button)
onCancel	() => void	No	Fires when the user clicks CANCEL
onChange	(range: FormattedDateRange) => void	No	Fires when the date range changes
onValidationChange	(validation: DateRangePickerValidationState) => void	No	Fires whenever validation state changes. Includes MUI DateField validation errors for start/end plus range-order validation.
openTo	'day' | 'month' | 'year'	No	Initial calendar view when opened Default: 'day'
shortcuts	DateRangeShortcut[]	No	Shortcut buttons to display. Pass [] to hide shortcuts. Defaults to localized presets (This Week, Last Week, etc.)
timezone	string	No	IANA timezone string for the store (e.g. ‘America/New_York’, ‘Australia/Sydney’). Used to ensure “today” in shortcuts and the highlighted current day match the store’s local date rather than the browser’s system clock. Default: browser local time
value	DateRange	No	Controlled date range value
views	Array<'day' | 'month' | 'year'>	No	Calendar views available Default: ['month', 'day']

Examples

Controlled range with shortcuts

import { DateRangePicker } from '@nike/whisker-component-library';
import dayjs from 'dayjs';

const [range, setRange] = useState({ start: dayjs().subtract(7, 'day'), end: dayjs() });

<DateRangePicker
  locale="en-US"
  value={range}
  onChange={setRange}
  onAccept={(r) => fetchReport(r)}
/>;

Live playground