# DatePicker
Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
```tsx
import React, { useState } from 'react';
import {
render,
DatePicker,
type Selected
} from '@shopify/ui-extensions-react/admin';
render('Playground', () => );
function App() {
const [selected, setSelected] = useState('2023-11-08')
return (
);
}
```
```js
import {extend, DatePicker} from '@shopify/ui-extensions/admin';
extend('Playground', (root) => {
const datePicker = root.createComponent(
DatePicker,
{},
'DatePicker',
);
root.appendChild(datePicker);
});
```
## DatePickerProps
### DatePickerProps
### yearMonth
value: `string | { year: number; month: number; }`
[Controlled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display.
Use in combination with `onYearMonthChange`.
Makes year/month navigation [controlled](https://reactjs.org/docs/forms.html#controlled-components).
### defaultYearMonth
value: `string | { year: number; month: number; }`
Default [uncontrolled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display.
Ignored when year/month navigation is [controlled](https://reactjs.org/docs/forms.html#controlled-components).
### disabled
value: `boolean | Disabled | 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
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.
Passed `undefined` or `string` allows user to select a single date,
an empty array or an array of dates allows selecting multiple dates,
an empty object or a Range object allows selecting a range of dates.
### 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.
### Range
### start
value: `DateString`
First day (inclusive) of the selected range
### end
value: `DateString`
Last day (inclusive) of the selected range
## Examples
Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
Use this when merchants need to select multiple dates.
```tsx
import React from 'react';
import {
render,
DatePicker,
type Selected,
} from '@shopify/ui-extensions-react/admin';
render('Playground', () => );
function App() {
const [selected, setSelected] = React.useState(['2023-11-08']);
return (
);
}
```
```js
import {extend, DatePicker} from '@shopify/ui-extensions/admin';
extend('Playground', (root) => {
const datePicker = root.createComponent(
DatePicker,
{ selected: ['2023-11-08'] },
'DatePicker',
);
root.appendChild(datePicker);
});
```
Use this when merchants need to select a range of dates.
```tsx
import React from 'react';
import {
render,
DatePicker,
type Selected
} from '@shopify/ui-extensions-react/admin';
render('Playground', () => );
function App() {
const [selected, setSelected] = React.useState({start: '2023-11-08', end: '2023-11-10' });
return (
);
}
```
```js
import {extend, DatePicker} from '@shopify/ui-extensions/admin';
extend('Playground', (root) => {
const datePicker = root.createComponent(
DatePicker,
{ selected: {start: '2023-11-08', end: '2023-11-10' } },
'DatePicker',
);
root.appendChild(datePicker);
});
```