DatePicker

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

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

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

DatePickerProps

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.

defaultYearMonth

Default [uncontrolled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display. Ignored when year/month navigation is controlled.

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.

readOnly

Whether the date picker is read-only.

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.

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.

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

end

Last day (inclusive) of the selected range

DayString

keyof typeof Day

Day

Sunday

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday