DatePicker · Glowup

Glowup

INPUTS · 36 / 89

DatePicker

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

󱀫

packages/ui/src/components/DatePicker.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Properties

1 control

Label

Usage

DatePicker.tsx

Variants

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

Basic

`DateTimePicker` with `mode` locked to `date`: the dialog opens straight on the calendar and neither the field nor the surface ever offers a time. Use it wherever a time-of-day would be meaningless — it is the same component, so every other prop behaves identically.

Selection modes

Only `mode` is locked, so `selectionMode` still switches the shape of the value: one `Date`, a `{ startDate, endDate }` pair, or an array of days. (`DateRangePicker` is this same component with the range mode fixed too.)

States

API reference

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

Props

27 on DatePickerProps

Also accepts everything from DistributiveOmit<DateTimePickerProps, "mode">.

Filter props

󰍉

onChange

required

(date: Date) => void

value

required

Date | null

`null` renders `placeholder` instead of a formatted value.

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"`.

selectionMode

"single"

startYear

number

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

style