Glowup
INPUTS · 37 / 89
DatePickerInput
DatePickerInput — a Material You inputs component for React Native and web.
󱀫
packages/ui/src/components/DatePickerInput.tsx
Live demo
Properties
10 controls
Label
Placeholder
Helper Text
Locale override
Device
󰍝
Error Message
Required
Clearable
Valid range = this month
Disable weekends
Disabled
Usage
DatePickerInput.tsx
<DatePickerInput label="Date of birth" />
Variants
The states and shapes this component is meant to be used in.
Typed entry
Text-first date entry: `inputEnabled` is locked on, so the field is typed directly and the trailing icon is the way into the calendar rather than the only way in. Field order follows the locale — the capture browser is it-IT, so this reads DD/MM/YYYY and `22/11/2026` parses as 22 November.
Validation
Typed text is validated against `validRange` on blur, not on every keystroke — a half-typed date is never an error. What fails validation comes back through the same `error` prop the rest of the kit uses.
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
25 on DatePickerInputProps
Also accepts everything from Omit< SingleDateTimePickerProps, "mode" | "selectionMode" | "inputEnabled" >.
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.
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
string
use24HourClock
boolean
Forces the 24-hour clock face. Left unset, the locale decides.
validRange
ValidRange
The selectable window plus individual excluded days.