Date picker

Basic usage

Loading view...

Free input

If you want to allow the user to type a date in addition to selecting one, use allowFreeInput
Loading view...

Component API

NameDescriptionDefault
id
string
The ID referenced by the global component state
defaultValue
Date
The picker value on initial render
defaultDisabled
boolean
The picker's disabled state on initial render
validate
((value: Date | null) => string | undefined) | Array<(value: Date | null) => string | undefined>
A single function or an array of functions that validate the input value.
required
boolean
Adds red asterisk on the right side of label and sets required on input element
onChange
(value: Date | null) => void
Called when the date changes. Prefer to use component state to get the value.
variant
"unstyled" | "default"
Picker appearance
size
"xs" | "sm" | "md" | "lg" | "xl"
Picker size
sm
disabled
boolean
Disables the picker. Prefer to use defaultDisabled and component state.
radius
"xs" | "sm" | "md" | "lg" | "xl"
Input border radius
width
number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; }
Width of the component. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up the entire row, 6 is half, 1 is 1/12. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row. content indicates that the component should take up as much space as its content. auto indicates that the component should take any leftover space on the row. To set width based on the screen size, use an object with a specific width for each breakpoint. e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%.
content
offset
number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; }
Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row. To set offset based on the screen size, use an object with a specific offset for each breakpoint. e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%.
placeholder
string
Hint text displayed when the picker is empty
value
Date
Selected date if using this component as a controlled component. Prefer to use the component state to get the value.
error
Component
Error text displayed below the picker
label
Component
Label displayed above the picker.
description
Component
Description displayed below the picker.
clearable
boolean
Allow the date value to be cleared
false
initiallyOpened
boolean
Whether the calendar dropdown should be open initially
false
excludeDate
(date: Date) => boolean
Callback function to determine if day should be disabled
allowFreeInput
boolean
Allow free text input in addition to picking on a calendar
false
onDropdownClose
() => void
Callback function that is called when the picker dropdown closes.
closeCalendarOnChange
boolean
Whether to close the calendar when a date is selected.
true

State API

NameDescription
value
Date | null
The selected Date
setValue
(value: Date | null) => void
Sets the value of the picker
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
errors
string[]
A list of validation errors
setErrors
(errors: string[]) => void
Sets the validation errors