Skip to main content

DateField

This is a form field that lets users select a date using the DatePicker component.

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 DateField

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

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

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

Preview

Anchor to examplesExamples

Anchor to example-add-a-multi-date-datefieldAdd a multi-date DateField

Use this when users need to select multiple dates.

Anchor to example-add-a-range-datefieldAdd a range DateField

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

Was this section helpful?

Add a multi-date DateField

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

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

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