Date Picker
Lab componentDate Picker
DatePicker
is composed of both a DateInput
and Calendar
controls, that allows users to select either a single date or a date range consisting of a start and end date, providing a flexible and intuitive way to choose dates. Currently all date based controls, need to be wrapped in a LocalizationProvider
- Wrap
DatePicker
inFormField
to provide the field with a visible label, help text, and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions. - Clearly indicate dates that can’t be selected, such as weekends, non-trading days, or other blocked days, if relevant to your use case.
- Consider showing date options in a dropdown instead of a date picker if the date or range is pre-determined and cannot be specified by the user.
- As the
DatePicker
typically composesDateInput
controls, refer to the accessibility guidance for DateInput.
- If the
DatePicker
useschildren
to compose other components such asCalendar
, move focus to the first interactive element within that overlay. - After a date is selected, provide feedback and move focus appropriately to enhance the user experience.
- Include clear instructions for each date selection.
- Display validation messages and status updates in a way that is accessible to screen readers.
- Use
aria-live
regions to announce changes, such as when a date is selected or when the calendar view changes. - Ensure that screen readers announce the selected dates and any instructions for interacting with the
DatePicker
.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Enter |
|
Space |
|
Right Arrow | When the input area has focus: - If text is highlighted, the highlight is removed and the text cursor is positioned at the right edge of the highlight. - If the text cursor is displayed, it is positioned on the alternative side of the following character. If there is no following character, there is no effect. |
Left Arrow | When the input area has focus: - If text is in a highlighted state, Left Arrow removes the highlight and positions the text cursor at the left edge of the highlight. - If the text cursor is visible, Left Arrow positions it on the alternative side of the preceding character. If there's no preceding character, there's no effect. |
Shift + Left Arrow / Shift + Right Arrow | When the input area has focus, drags selection over text characters, one at a time. |
Backspace | When the input area has focus and: - Text is highlighted, this action removes all highlighted characters. - The text cursor is positioned to the right of text, this action removes the preceding character. |
Alphanumeric / Special keys | When the input area has focus, this action inserts the relevant character at the position of the text cursor. |
Control + A / Command + A | This action highlights all strings within the field. |
- Wrap
DatePicker
inFormField
to provide the field with a visible label, help text, and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions. - Clearly indicate dates that can’t be selected, such as weekends, non-trading days, or other blocked days, if relevant to your use case.
- Consider showing date options in a dropdown instead of a date picker if the date or range is pre-determined and cannot be specified by the user.
- As the
DatePicker
typically composesDateInput
controls, refer to the accessibility guidance for DateInput.
- If the
DatePicker
useschildren
to compose other components such asCalendar
, move focus to the first interactive element within that overlay. - After a date is selected, provide feedback and move focus appropriately to enhance the user experience.
- Include clear instructions for each date selection.
- Display validation messages and status updates in a way that is accessible to screen readers.
- Use
aria-live
regions to announce changes, such as when a date is selected or when the calendar view changes. - Ensure that screen readers announce the selected dates and any instructions for interacting with the
DatePicker
.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Enter |
|
Space |
|
Right Arrow | When the input area has focus: - If text is highlighted, the highlight is removed and the text cursor is positioned at the right edge of the highlight. - If the text cursor is displayed, it is positioned on the alternative side of the following character. If there is no following character, there is no effect. |
Left Arrow | When the input area has focus: - If text is in a highlighted state, Left Arrow removes the highlight and positions the text cursor at the left edge of the highlight. - If the text cursor is visible, Left Arrow positions it on the alternative side of the preceding character. If there's no preceding character, there's no effect. |
Shift + Left Arrow / Shift + Right Arrow | When the input area has focus, drags selection over text characters, one at a time. |
Backspace | When the input area has focus and: - Text is highlighted, this action removes all highlighted characters. - The text cursor is positioned to the right of text, this action removes the preceding character. |
Alphanumeric / Special keys | When the input area has focus, this action inserts the relevant character at the position of the text cursor. |
Control + A / Command + A | This action highlights all strings within the field. |
- Wrap
DatePicker
inFormField
to provide the field with a visible label, help text, and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions. - Clearly indicate dates that can’t be selected, such as weekends, non-trading days, or other blocked days, if relevant to your use case.
- Consider showing date options in a dropdown instead of a date picker if the date or range is pre-determined and cannot be specified by the user.
- As the
DatePicker
typically composesDateInput
controls, refer to the accessibility guidance for DateInput.
- If the
DatePicker
useschildren
to compose other components such asCalendar
, move focus to the first interactive element within that overlay. - After a date is selected, provide feedback and move focus appropriately to enhance the user experience.
- Include clear instructions for each date selection.
- Display validation messages and status updates in a way that is accessible to screen readers.
- Use
aria-live
regions to announce changes, such as when a date is selected or when the calendar view changes. - Ensure that screen readers announce the selected dates and any instructions for interacting with the
DatePicker
.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Enter |
|
Space |
|
Right Arrow | When the input area has focus: - If text is highlighted, the highlight is removed and the text cursor is positioned at the right edge of the highlight. - If the text cursor is displayed, it is positioned on the alternative side of the following character. If there is no following character, there is no effect. |
Left Arrow | When the input area has focus: - If text is in a highlighted state, Left Arrow removes the highlight and positions the text cursor at the left edge of the highlight. - If the text cursor is visible, Left Arrow positions it on the alternative side of the preceding character. If there's no preceding character, there's no effect. |
Shift + Left Arrow / Shift + Right Arrow | When the input area has focus, drags selection over text characters, one at a time. |
Backspace | When the input area has focus and: - Text is highlighted, this action removes all highlighted characters. - The text cursor is positioned to the right of text, this action removes the preceding character. |
Alphanumeric / Special keys | When the input area has focus, this action inserts the relevant character at the position of the text cursor. |
Control + A / Command + A | This action highlights all strings within the field. |