Choose a version:

DatePicker

Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.

Anchor to datepickerpropsDatePickerProps

Anchor to yearMonth yearMonth string | { year: number; month: number; }: Controlled year and month to display. Use in combination with onYearMonthChange. Makes year/month navigation controlled.
Anchor to defaultYearMonth defaultYearMonth string | { year: number; month: number; }: 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 selected selected 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.
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](https://reactjs.org/docs/forms.html#controlled-components).
```
string | { year: number; month: number; }
```
defaultYearMonth
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).
```
string | { year: number; month: number; }
```
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 | Disabled | Disabled[]
```
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. 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.
```
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 Selected> {
  /**
   * [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).
   */
  yearMonth?: {year: Year; month: Month} | YearMonthString;

  /**
   * 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).
   */
  defaultYearMonth?: {year: Year; month: Month} | YearMonthString;

  /**
   * 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?: Disabled | Disabled[] | 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.
   * 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.
   */
  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: Year; month: Month}): void;
}

Disabled

DateString | Range | Day

DateString

A date string using the simplified ISO 8601 format (`YYYY-MM-DD`)

string

Range

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

export interface Range {
  /**
   * First day (inclusive) of the selected range
   */
  start?: DateString;

  /**
   * Last day (inclusive) of the selected range
   */
  end?: DateString;
}

Day

'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday'

Month

Month in 1-12 range

number

Was this section helpful?

Add a single-date DatePicker

import React, { useState } from 'react';

import {

render,

DatePicker,

type Selected

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

render('Playground', () => <App />);

function App() {

const [selected, setSelected] = useState<Selected>('2023-11-08')

return (

);

}

examples

Add a single-date DatePicker

React

import React, { useState } from 'react';
import {
  render,
  DatePicker,
  type Selected
} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  const [selected, setSelected] = useState<Selected>('2023-11-08')
  return (
    <DatePicker selected={selected} onChange={setSelected} />
  );
}

JS

import {extend, DatePicker} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const datePicker = root.createComponent(
    DatePicker,
    {},
    'DatePicker',
  );

  root.appendChild(datePicker);
});

Preview

Anchor to examplesExamples

Anchor to example-add-a-multi-date-datepickerAdd a multi-date DatePicker

Use this when merchants need to select multiple dates.

Anchor to example-add-a-range-datepickerAdd a range DatePicker

Use this when merchants need to select a range of dates.

Was this section helpful?

Add a multi-date DatePicker

import React from 'react';

import {

render,

DatePicker,

type Selected,

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

render('Playground', () => <App />);

function App() {

const [selected, setSelected] = React.useState<Selected>(['2023-11-08']);

return (

);

}

examples

Add a multi-date DatePicker

description

Use this when merchants need to select multiple dates.

React

import React from 'react';
import {
  render,
  DatePicker,
  type Selected,
} from '@shopify/ui-extensions-react/admin';


render('Playground', () => <App />);

function App() {
  const [selected, setSelected] = React.useState<Selected>(['2023-11-08']);
  
  return (
    <DatePicker selected={selected} onChange={setSelected} />
  );
}

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

Add a range DatePicker

description

Use this when merchants need to select a range of dates.

React

import React from 'react';
import {
  render,
  DatePicker,
  type Selected
} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  const [selected, setSelected] = React.useState<Selected>({start: '2023-11-08', end: '2023-11-10' });

  return (
    <DatePicker selected={selected} onChange={setSelected} />
  );
}

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