Homecomponentsinput

DatePicker

An input that allows picking a day or day range.

Display a field that pops open a calendar asking for a day or day range.

Single day

Use single as mode to display a field asking for a single day.

Date

Open in Playroom

Day Range

Use range as mode to display a field asking for a range of day.

Date

Open in Playroom

API

type

Required

The kind of selection to allow.

range

single

onChange

Required

Action to perform when selection changes.

((selected?: Date | undefined) => void) | ((selected?: DateRange | undefined) => void)

name

Required

Name for the field.

string

value

The selected day or range.

Date | DateRange

placeholder

Placeholder to show when no value given.

string

ID of the field.

string

label

Adds a label to the field.

string

tip

Tooltip shown next to the label.

string

secondaryLabel

Adds a secondary label to the field.

ReactNode

description

Note shown below the field.

string

errorMessage

Displays an error message under the field.

string

disabled

Disables the field.

true

false

placeholderStart

Placeholder to show when no starting day given.

string

placeholderEnd

Placeholder to show when no ending day given.

string