Date picker - smbc-digital/patterns GitHub Wiki
Contents
– User needs – How it works – Status – Error messages – Accessibility statement – Examples – Research into this pattern – Discuss this pattern
User needs
This pattern is to help users pick a date in the past or near future; the use of a calendar control can aid users to select the right date.
How it works
The date picker pattern allows users to enter a date, either with a text field or the use of a visual representation of a calendar. The field input presents the resulting format in day, month and year or DD/MM/YYYY. By presenting the user with a calendar, it allows them to easily see what day of the week and week of the month a particular date is in, which is made useful when picking dates.
The use of calendar control relies on HTML5 and should be treated as an enhancement; users should always be able to enter the date into a text field as well as use the control.
The user interface can vary from browser to browser, you can see this on Mozilla Developer Network , and not all browsers are compatible with HTML 5 calendar, you can see this on Caniuse.com. In unsupported browsers, for example, IE and Safari the calendar will not appear and only a text field will be present.
Status
Working progress
Error messages
Use a validation message to identify when the user has failed to provide the information in the format you are expecting. To help the user, you should show the user an error message that allows them to fix the problem.
For styling follow GOV.UK
| Label | Error state | Validation messages |
|---|---|---|
| Date | If the text field is blank | Enter the date you'd like the... |
| Date | If the date is entered incorrectly | Check the date and try again |
Accessibility statement
This pattern has a rating of AA.
Accessibility testing is the process of testing the pattern for ease of use with specific disabilities. Please see our accessibility guidelines.
Improvements
To make it AAA, we need to:
- Add...
Examples
Research into this pattern
For the development of this pattern, we looked closely at: GOV.UK