Date picker

    Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.

    Examples

    Down Arrow

    Use when merchants need to select a single day close to today (today is the default starting position for the date picker).


    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

    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.

    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