Date Pickers
Date picker (calendar) allows users to easily and quickly select a date from a calendar.
Overview
Date pickers should be used with input group containers.
Date pickers come in two sizes: small and medium, with medium as the default. The ['medium'] size has a tablet/mobile breakpoint of 1024 px. On tablet and mobile screens, it will shrink to better fit the limited content area while still retaining a large touch target area. Use ['small'] date pickers only with specific components, such as data tables.
Design and Layout
Anatomy
| Element | Description |
|---|---|
| 1. Date Picker Input | This text input allows users to type in a specific date |
| 2. Calendar Container | Container for all calendar components |
| 3. Month/Year Button | This button opens and closes the year and month overlays |
| 4. Prev Month Icon Button | This icon button allows users to navigate to previous months |
| 5. Next Month Icon Button | This icon button allows users to navigate to forthcoming months |
| 6. Today's Date/Selected Date | Today's date/the selected date is indicated with a blue background and white text |
| 7. Hover State (Day) | The hover state is indicated with a light gray background and dark gray text |
| 8. Month/Year Selector Overlay | This overlay allows users to select the month and year |
| 9. Year Button | This button allows users to toggle between selecting the month and year |
| 10. Next Year Icon Button | This icon button allows users to navigate to forthcoming years |
| 11. Current Month | When the current month is not selected, it is indicated with blue text |
| 12. Selected Month | The selected month is indicated with a blue background and white text |
| 13. Hover State (Month/Year) | The hover state is indicated with a light gray background and dark gray text |
Dos and Don'ts
Do- Do use the date picker when users need to enter a date that is within a year of the current date.
Don't- Don’t use for “Date of Birth.”
Accessibility
When using the Date Picker component, it's essential to ensure it is accessible to all users, including those relying on assistive technologies. The following guidelines highlight how to achieve the best accessibility practices when implementing the Date Picker.
- Use Buttons: Replace
<a>tags with<button>elements for controls like "Previous Month" and "Next Month."<button type="button" aria-label="Previous Month"><IconCaretLeft /></button>
- Descriptive Labels: Use descriptive
aria-labelattributes for context, e.g., "Select date August 9, 2023."<button type="button" aria-label="Select date August 9, 2023"> 9 </button>
- Dynamic Content Updates: Add
aria-live="polite"to announce changes like month/year updates.<div aria-live="polite" tabindex="0">August 2023</div>
- Focus Management: Ensure focus moves logically after changes, e.g., focusing on the first date of the new month.
- Focusable Elements: Add
tabindex="0"to elements like the current month/year label for easy navigation.
Installation
Indigo's DatePicker component is based on the V-Calendar Vue.js plugin.
Include the import statements and the Vue.use() global method below to use the plugin:
Props
No records available |