Skip to main content

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.

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 (
<DatePicker selected={selected} onChange={setSelected} />
);
}

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 (
<DatePicker selected={selected} onChange={setSelected} />
);
}