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

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

Drag to resize example

Props

allowRange
boolean
Allow a range of dates to be selected
disableDatesAfter
Date
Disable selecting dates after this.
disableDatesBefore
Date
Disable selecting dates before this.
id
string
ID for the element
monthRequired
Months
The month to show
multiMonth
boolean
The selection can span multiple months
selected
Date | Range
The selected date or range of dates
weekStartsOn
Weekdays
First day of week. Sunday by default
yearRequired
Year
The year to show
onChange
(date: Range) => void
Callback when date is selected.
onMonthChange
(month: Months, year: Year) => void
Callback when month is changed.

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

Default date picker

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

Date picker on Android

Accessibility

See Material Design and development documentation about accessibility for Android:

Default date picker

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

Date picker on iOS

Accessibility

See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

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