Usage
A date picker is an input control that allows the user to select a single date or a range of dates by either typing or selecting from a calendar.
Best practices
Use a date picker when asking the user for a specific date or range of dates, such as an appointment date or the valid period of a voucher.
Do not use a date picker for entering a birth date or if the date goes ±10 years to the future or past. Use an input component instead.
Labels
Even though the date picker has an icon prefix as a visual hint of the data needed, labels must be used to better indicate what type of data is required. See more on label importance here.
Use labels to specify the data required in the input field.
Do not avoid labels as they are essential to the input completion and later understanding.
Formatting
Date formatting allows you to present the appropriate format for specific situations. Use it thoughtfully and customize it according to your specific use cases.
Use numeric dates when the space is limited. Different countries have different conventions and they can be confusing for international users.
Use the descriptive format when you have enough space and it is important to present more details about the date.
Hints & errors
Hints and error messages provide additional directions to support the label meaning in an accessible manner.
Use hints to provide useful information about the required input.
Do not duplicate information, if an error message is repeating the hint, hide the hint.
Examples
Live Preview
Props
Fetching props...
Events
Fetching events...