Choose a version:

DatePicker

The DatePicker component is a calendar picker UI that allows users to select a single date or a date range

Anchor to datepickerpropsDatePickerProps

Anchor to selected selected T required: A date, an array of dates, or a range object with start and/or end keys indicating the selected dates. When a range is set, dates between the boundaries will be selected.
Anchor to defaultYearMonth defaultYearMonth: Default uncontrolled year and month to display. Ignored when year/month navigation is controlled.
Anchor to disabled disabled [] | boolean: Disabled dates, days, and/or ranges, or the date picker. Unbound range disables all dates either from start date or to end date. true disables the date picker.
Anchor to onChange onChange (selected: T) => void: A callback that is run whenever a date is selected or unselected. This callback is called with a string, an array of strings or a range object representing the selected dates. This component is controlled, so you must store these values in state and reflect it back in the selected props.
Anchor to onYearMonthChange onYearMonthChange (yearMonth: { year: number; month: number; }) => void: A callback that is run whenever the month is changed. This callback is called with an object indicating the year/month the UI should change to. When year/month navigation is controlled you must store these values in state and reflect it back in the yearMonth prop.
Anchor to readOnly readOnly boolean: Whether the date picker is read-only.
Anchor to yearMonth yearMonth: Controlled year and month to display. Use in combination with onYearMonthChange. Makes year/month navigation controlled.

YearMonth

{year: number; month: number} | YearMonthString

YearMonthString

A year/month string using the simplified ISO 8601 format (`YYYY-MM`)

string

DisabledDate

DateString | DateRange | DayString

DateString

string

DateRange

end
Last day (inclusive) of the selected range
```
DateString
```
start
First day (inclusive) of the selected range
```
DateString
```

DayString

keyof typeof Day

Day

Sunday
```
0
```
Monday
```
1
```
Tuesday
```
2
```
Wednesday
```
3
```
Thursday
```
4
```
Friday
```
5
```
Saturday
```
6
```

Examples

import {

reactExtension,

DatePicker,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return <DatePicker selected="2021-06-01" />;

}

Preview

Examples

Basic DatePicker

React

import {
  reactExtension,
  DatePicker,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return <DatePicker selected="2021-06-01" />;
}

JS

import {extension, DatePicker} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const datepicker = root.createComponent(DatePicker, {
    selected: '2021-06-01',
  });

  root.appendChild(datepicker);
});

Anchor to best-practicesBest Practices

By adhering to these design guidelines, the DatePicker component can offer a seamless and efficient method for users to select dates, thereby enhancing the overall user experience.

Default to showing today’s date if available.
Display the first available date when selecting future dates.
To minimize errors, the process of selecting a date range may require multiple steps. Therefore, providing a way for users to explicitly confirm their selection is recommended.

When to use a DatePicker

The DatePicker component is well-suited for the following scenarios:

Specifying shipping or delivery dates
Scheduling pick-up dates
Booking dates for service providers
Selecting event dates for ticket offerings
Specifying rental dates to determine start and end dates for renting a product

When not to use a DatePicker component

A DatePicker component might not be the most appropriate choice in the following situations:

When the date to be entered is several years in the future or the past.
When the date is easily memorable and can be quickly typed using the keyboard e.g. Date of birth.

Was this page helpful?