Date picker

The DatePicker component allows users to select a date. For selecting a date and time, use DateTimePicker.

Basic usage

tsx
Copied
1
<DatePicker label="Choose a date" placeholder="Choose a date" />

Component API

autoFocus
optional
boolean

Whether to automatically focus on the picker input.

clearable
optional
default: false
boolean

Allow the date value to be cleared.

closeCalendarOnChange
optional
default: true
boolean

Whether to close the calendar when a date is selected.

defaultDisabled
optional
boolean

The picker's disabled state on initial render.

defaultValue
optional
Date

The picker value on initial render.

description
optional
React.ReactNode

Description displayed below the picker.

disabled
optional
boolean

Disables the picker. Prefer to use defaultDisabled and component state.

error
optional
React.ReactNode

Error text displayed below the picker.

excludeDate
optional
(date: Date) => boolean

Callback function to determine if day should be disabled.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
default: auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
id
optional
string

The ID referenced by the global component state.

initiallyOpened
optional
default: false
boolean

Whether the calendar dropdown should be open initially.

label
optional
React.ReactNode

Label displayed above the picker.

onChange
optional
(value: Date | null) => void

Called when the date changes. Prefer to use component state to get the value.

onDropdownClose
optional
() => void

Callback function that is called when the picker dropdown closes.

placeholder
optional
string

Hint text displayed when the picker is empty.

radius
optional
"xs" | "sm" | "md" | "lg" | "xl"

Input border radius.

required
optional
default: false
boolean

Adds red asterisk on the right side of label and sets required on input element

size
optional
default: sm
"xs" | "sm" | "md" | "lg" | "xl"

Picker size.

validate
optional
((value: Date | null) => string | undefined) | Array<(value: Date | null) => string | undefined>

A single function or an array of functions that validate the input value.

value
optional
Date

Selected date if using this component as a controlled component. Prefer to use the component state to get the value.

variant
optional
"unstyled" | "default"

Picker appearance.

width
optional
default: auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.

State API

disabled
boolean

Whether the picker is disabled

setDisabled
(disabled?: boolean) => void

Sets the disabled value of the picker. If the disabled value is not provided, the picker will be disabled

setValue
(value: Date | null) => void

Sets the value of the picker

value
Date | null

The selected Date