Date picker
Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Events
DatePicker events
❕ Tip
Check out the new patterns section to learn how merchants prefer to select dates in different scenarios!
Best practices
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
Accessibility
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.
Keyboard support
- 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