Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
Use when merchants need to select a single day close to today (today is the default starting position for the date picker).
Date pickers should:
- Use smart defaults and highlight common selections
- Close after a single date is selected unless a range with a start and end date is required
- Set the start date on first click or tap and the end date on second click or tap if a range is required
- Not be used to enter a date that is many years in the future or the past
- Follow date format guidelines
See Material Design and development documentation about accessibility for Android:
See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
Some users might find interacting with date pickers to be challenging. When you use the date picker component, always give users the option to enter the date using a text field component as well.
If you use the date picker within a popover component, then use a button to trigger the popover instead of displaying the popover when the text input gets focus. This gives users more control over their experience.
- Press the tab key to move forward and shift + tab to move backward through the previous button, next button, and the calendar
- When focus is in the calendar, move keyboard focus between the dates using the arrow keys
- To select a date that has focus, press the enter/return key