A date or time picker field is formatted to only allow for date and time entry formats. You can have opt to only have the date, to only have the time, or to include both the date and time. In addition, you can incorporate a date or time range. Some date pickers also include a calendar button that allows the user to look up and validate the date they are selecting. The complexity of your date and/or time picker will depend on the overall business requirements and intended user experience.
When to use this component
- When requesting a date or time from a user. Providing a date field that validates the date reduces the risk of an invalid date being entered and also ensures the date follows the data collection requirement process for the given date being collected, if applicable. For example, credit card validation requires a specific format with just the month and year, while federal gathering of birthdates would require the month, date, and year.
When not to use this component
- When you cannot find a date picker field that is accessible.
Accessibility and Usability
- Many add-on date pickers are not accessible so when adding a plug-in, make sure to test and validate its accessibility. A common issue that arises is that the date field, although visibly displayed as a text field, ends up requiring the use of the calendar button and in turn, the calendar pop-up is often inaccessible for keyboard only, speech input, and screen reader users.
- Users should be provided with clear instructions on the date formatting needed for text field entry. Do not include the date format as placeholder content in the field - it should either be placed at the end of the label or in a field instructions section if the form tool you are using provides a field instructions option.
- Invalid fields should be clearly marked and screen reader users should be alerted with an error message.
- Both date and time pickers must include a field label that's associated with the field. The label in the code must match the visible label on the page to ensure that speech input users can access the field with the label.
- Use of the simple date picker vs the date picker with a calendar depends on the following:
- If it's a memorable date that the user can easily validate, then you don't need a calendar pop-up. For example, the user's birthday or the user's credit card expiration date only need a simple date entry field.
- If it's more complex, such as asking someone to select a range of dates that works for them for a meeting, then you are best to also include a calendar to validate that date if you can find or design an accessible calendar pop-up component.