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 yearMonth yearMonth: Controlled year and month to display. Use in combination with onYearMonthChange. Makes year/month navigation controlled.
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 readOnly readOnly boolean: Whether the date picker is read-only.
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.

DatePickerProps

yearMonth
[Controlled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display. Use in combination with `onYearMonthChange`. Makes year/month navigation controlled.
```
YearMonth
```
defaultYearMonth
Default [uncontrolled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display. Ignored when year/month navigation is controlled.
```
YearMonth
```
disabled
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.
```
boolean | DisabledDate[]
```
readOnly
Whether the date picker is read-only.
```
boolean
```
selected
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.
```
T
```
onChange
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](https://reactjs.org/docs/forms.html#controlled-components), so you must store these values in state and reflect it back in the `selected` props.
```
(selected: T) => void
```
onYearMonthChange
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.
```
(yearMonth: { year: number; month: number; }) => void
```

export interface DatePickerProps<T extends SelectedDate> {
  /**
   * [Controlled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display.
   * Use in combination with `onYearMonthChange`.
   * Makes year/month navigation controlled.
   */
  yearMonth?: YearMonth;
  /**
   * Default [uncontrolled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display.
   * Ignored when year/month navigation is controlled.
   */
  defaultYearMonth?: YearMonth;
  /**
   * 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.
   */
  disabled?: DisabledDate[] | boolean;
  /**
   * Whether the date picker is read-only.
   */
  readOnly?: boolean;
  /**
   * 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.
   */
  selected: T;
  /**
   * 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](https://reactjs.org/docs/forms.html#controlled-components),
   * so you must store these values in state and reflect it back in the
   * `selected` props.
   */
  onChange?(selected: T): 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.
   */
  onYearMonthChange?(yearMonth: {year: number; month: number}): void;
}

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

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

export interface DateRange {
  /** First day (inclusive) of the selected range */
  start?: DateString;
  /** Last day (inclusive) of the selected range */
  end?: DateString;
}

DayString

keyof typeof Day

Day

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

export enum Day {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
}

Was this section helpful?

Basic DatePicker

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" />;

}

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);
});

Preview

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 section helpful?