Date picker
Provides a calendar-based input method for users to specify a date.
Examples
Usage
The date picker allows users to enter a date by selecting a specific date or a range of dates from a calendar, and also by typing it in.
Do:
- give the user the option to be able to manually enter the date into the input date field
- show the expected date format in the guidance text
- provide clear feedback when a user enters an invalid date, along with instructions on how to correct the error
- use two separate date picker components: one for the start date (e.g. the start date of a learning course) and another for the end date (e.g. the end date of the learning course) - together, these fields form a date range that defines the selected period
- ensure that when users select both a start and end date, the end date cannot be earlier than the start date
- show clearly what start and end date the user has selected
- have the date auto-filled in for date fields that need the same date information in later sections of a form
Avoid:
- having a pre-populated default date value in the date field if there is no certainty the user will choose that default date
References
NN/g Nielsen Norman Group
Date-Input Form Fields: UX Design Guidelines
Smashing Magazine
Designing The Perfect Date And Time Picker
UX Planet
Date Picker Design Best Practices
Parameters for turas-date-picker
- asp-for - Binds the date picker to a model property
- guidance-text - Provides guidance text for the user
- field-column-widths - Sets the column width for the date picker
- additional-classes - Allows adding custom CSS classes
- hide-today-button - Hides the button to select today's date
- hide-clear-button - Hides the button to clear the selected date
- hide-validation-message - Suppresses validation messages
- readonly - Makes the date picker read-only
- asp-is-disabled - Disables the date picker
- hide-label - Hides the label for the date picker
Close without saving
Are you sure you want to close without saving?
Any information you have entered will be lost!
Testing
Check that the date picker:
- allows users to navigate the calendar using only the keyboard (arrow and tab keys to navigate, ESC to close and return to select date)
- allows users to enter a date using only the keyboard
- shows a visible focus state on the input and calendar controls
- focus moves logically in and out of the calendar
- announces the label, role and selected date correctly with screen readers
- hint text or instructions are read out (for example, formatting guidance) by screen readers
- provide date format guidance, for example dd/mm/yyyy
- communicates unavailable dates or date ranges clearly
- calendar button has an accessible name
- error messages are announced by screen readers and associated with the date picker
- input does not trigger unexpected changes while typing or clicking on the calendar component
- required fields are clearly communicated
- remains usable at 400% zoom and supports reflow without horizontal scrolling
- behaves consistently across supported browsers and devices
Developer considerations
When using the date picker component in your form:
- always provide a visible label using <label for=""> and an ID
- ensure the date picker has a programmatic name (via label or aria-labelledby)
- use aria-describedby to associate hint text and error messages with the date picker
- write error messages that explain what went wrong and how to fix it
- do not rely on placeholder text as a label
- ensure the control works without JavaScript where possible
- avoid blocking manual typing
- ensure a visible focus state that meets contrast requirements
- allow text resizing and reflow without losing functionality
- avoid auto-submitting or triggering unexpected changes while typing
- ensure sufficient touch target size and spacing, with a target size of at least 24 × 24 CSS pixels
Required fields
If your form contains fields that users must complete:
- clearly indicate when the date picker is required by using a visual indicator such as an asterisk
- do not rely on the visual indicator alone (for example, an asterisk) to communicate that a field is required and include the help text “Required fields are marked with an asterisk *” at the top of every page of the form
- ensure the required state of the date picker is programmatically available to assistive technologies using aria-required="true"