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.

Best practices

Date pickers should:

  • Use smart defaults and highlight common selections (e.g. Today)
  • Close after a single date is selected unless a start and end date is required
  • Set the start date on first click and the end date on second click if a range is required
  • Not be used to enter a date that is many years in the future or the past

Content guidelines

There are no content elements that are specific to the date picker. Learn how to format dates and numbers in your interface content.