# DatePicker

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

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

```

## DatePickerProps

### DatePickerProps

### defaultYearMonth

value: `YearMonth`

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

### disabled

value: `DisabledDate[] | boolean`

  - DisabledDate: DateString | DateRange | DayString
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.

### onChange

value: `(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](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

value: `(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.

### readOnly

value: `boolean`

Whether the date picker is read-only.

### selected

value: `T`

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.

### yearMonth

value: `YearMonth`

  - YearMonth: {year: number; month: number} | YearMonthString
[Controlled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display. Use in combination with `onYearMonthChange`. Makes year/month navigation controlled.

### DateRange

### end

value: `DateString`

  - DateString: string
Last day (inclusive) of the selected range

### start

value: `DateString`

  - DateString: string
First day (inclusive) of the selected range

### Day

### Sunday

value: `0`


### Monday

value: `1`


### Tuesday

value: `2`


### Wednesday

value: `3`


### Thursday

value: `4`


### Friday

value: `5`


### Saturday

value: `6`