Date Picker
The DatePicker component is a calendar picker UI that allows users to select a single date or a date range
Anchor to datepickerpropsDatePickerProps
A date, an array of dates, or a range object with start
and/or end
keys indicating the selected dates. When a range is set, dates between the boundaries will be selected.
Default uncontrolled year and month to display. Ignored when year/month navigation is controlled.
Disabled dates, days, and/or ranges, or the date picker. Unbound range disables all dates either from start
date or to end
date. true
disables the date picker.
A callback that is run whenever a date is selected or unselected. This callback is called with a string, an array of strings or a range object representing the selected dates. This component is controlled, so you must store these values in state and reflect it back in the selected
props.
A callback that is run whenever the month is changed. This callback is called with an object indicating the year/month the UI should change to. When year/month navigation is controlled you must store these values in state and reflect it back in the prop.
Whether the date picker is read-only.
Controlled year and month to display. Use in combination with . Makes year/month navigation controlled.
Basic DatePicker
Preview

Anchor to best-practicesBest Practices
By adhering to these design guidelines, the DatePicker component can offer a seamless and efficient method for users to select dates, thereby enhancing the overall user experience.
Default to showing today’s date if available.
Display the first available date when selecting future dates.
To minimize errors, the process of selecting a date range may require multiple steps. Therefore, providing a way for users to explicitly confirm their selection is recommended.
When to use a DatePicker
The DatePicker component is well-suited for the following scenarios:
Specifying shipping or delivery dates
Scheduling pick-up dates
Booking dates for service providers
Selecting event dates for ticket offerings
Specifying rental dates to determine start and end dates for renting a product
When not to use a DatePicker component
A DatePicker component might not be the most appropriate choice in the following situations:
When the date to be entered is several years in the future or the past.
When the date is easily memorable and can be quickly typed using the keyboard e.g. Date of birth.