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 defaultYearMonth defaultYearMonth {year: ; month: } |: 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 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.
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 yearMonth yearMonth {year: ; month: } |: Controlled year and month to display. Use in combination with onYearMonthChange. Makes year/month navigation controlled.

Year

number

Month

Month in 1-12 range

number

YearMonthString

A year/month string using the simplified ISO 8601 format (`YYYY-MM`)

string

Disabled

DateString | Range | Day

DateString

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

string

Range

end
Last day (inclusive) of the selected range
```
DateString
```
start
First 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'

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