Date Picker
Combines an Input and a Calendar popover to allow users to select a date.
The label
attribute provides a short description of the purpose of the Date Picker.
If a visible label can't be used, provide one using the aria-label
The helper-text
attribute provides additional information to help the user enter the correct information.
To add HTML to the helper text, use the helper-text slot.
The error-text
attribute provides a custom error message. Any current error state will be overridden by error-text
.
The value
attribute contains the currently selected date.
Empty string or undefined
represent no date being selected.
It will always contain a valid date in the format YYYY-MM-DD
when a date is selected. If the user types an invalid date, value
will be empty.
Set the min
attribute to configure the earliest date to accept. The user will be prevented from choosing an earlier date, however it is still possible to manually enter one.
Set the max
attribute to configure the latest date to accept. The user will be prevented from choosing an later date, however it is still possible to manually enter one.
Add the disabled
attribute to disable the date picker.
Add the readonly
attribute to make the date picker readonly.