DateRangePicker

Glowup

INPUTS · 38 / 89

DateRangePicker

DateRangePicker — a Material You inputs component for React Native and web.

󱀫

packages/ui/src/components/DateRangePicker.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Properties

9 controls

Label

Placeholder

Month scrolling

Locale override

Helper Text

Clearable

Valid range = this month

Disable weekends

Disabled

Usage

DateRangePicker.tsx

Variants

The states and shapes this component is meant to be used in.

Basic

`DatePicker` with both `mode` and `selectionMode` locked, so `value` is always a `{ startDate, endDate }` pair. A half-picked range is a legal value — the field shows the start and waits for the end — and `EMPTY_RANGE` is the exported empty pair to initialise state with.

States

The range types its two ends inside the dialog rather than in the field, so the field itself is display-only. Everything else — bounds, helper text, errors, the disabled treatment — is `DateTimePicker`'s.

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

26 on DateRangePickerProps

Also accepts everything from Omit< RangeDateTimePickerProps, "mode" | "selectionMode" >.

Filter props

󰍉

onChange

required

(range: DateRange) => void

value

required

DateRange

clearable

boolean

Adds a clear affordance to the field. Needs `onClear` to do anything.

defaultInputType

PickerInputType

Which surface the dialog opens on. Default `"picker"`.

defaultOpen

boolean

Mount with the picker already open. Uncontrolled after that.

disabled

boolean

endYear

number

Last year offered by the year grid. Defaults to 100 years on.

error

string

Error text below the field; also recolors the field.

firstDayOfWeek

number

0 = Sunday … 6 = Saturday. Defaults to the locale's own week start.

helperText

string

Supporting text below the field; hidden while an error is shown.

inputEnabled

boolean

Lets the user type the value straight into the field. Default `true`.

isDateDisabled

(date: Date) => boolean

Excludes days `validRange` cannot express (weekends, a computed holiday set).

label

string

labels

DateTimePickerLabels

Chrome strings of the picker surface (nav buttons, "Today", "Clear", …).

locale

string

Overrides the formatting/labelling locale. Defaults to the device locale.

minuteInterval

MinuteInterval

Minute granularity of the clock. Defaults to 1.

onClear

() => void

placeholder

string

Shown while the field has no value.

relativeLabels

DateTimePickerRelativeLabels

Overrides the relative day labels, e.g. from i18n: `relativeLabels={{ today: t("TODAY"), yesterday: t("YESTERDAY") }}`. Defaults to the device locale via Intl.RelativeTimeFormat.

required

boolean

Appends an asterisk to the label.

scrollMode

CalendarScrollMode

Month navigation inside the dialog. Default `"endless"`.

startYear

number

First year offered by the year grid. Defaults to 100 years back.

style

StyleProp<ViewStyle>

testID