DatePickerInput
Date, multiple dates and dates range picker input
Import
Source
Docs
Package
DatePicker props
DatePickerInput
supports most of the DatePicker props,
read through DatePicker documentation to learn about all component features that are not listed on this page.
Usage
Multiple dates
Set type="multiple"
to allow user to pick multiple dates:
Dates range
Set type="range"
to allow user to pick dates range:
Open picker in modal
By default, DatePicker is rendered inside Popover.
You can change that to Modal by setting dropdownType="modal"
:
Value format
Use valueFormat
prop to change dayjs format of value label:
Value formatter
valueFormatter
is a more powerful alternative to valueFormat
prop.
It allows formatting value label with a custom function.
The function is the same for all component types (default
, multiple
and range
)
– you need to perform additional checks inside the function to handle different types.
Example of using a custom formatter function with type="multiple"
:
Clearable
Set clearable
prop to display clear button in the right section. Note that if you set rightSection
prop, clear button will not be displayed.
Disabled state
Input props
DatePickerInput
component supports Input and Input.Wrapper components features and all button
element props. DatePickerInput
documentation does not include all features supported by the component – see Input documentation to learn about all available features.
With icon
Get element ref
Accessibility
If DatePickerInput
is used without label
prop, it will not be announced properly by screen reader:
Set aria-label
to make the input accessible. In this case label will not be visible, but screen reader will announce it:
If label
prop is set, input will be accessible it is not required to set aria-label
: