Skip to main content

DatePicker

The DatePicker component is a calendar picker UI that allows users to select a single date or a date range

T
required

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.

Default uncontrolled year and month to display. Ignored when year/month navigation is controlled.

[] | 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.

(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.

(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.

boolean

Whether the date picker is read-only.

Controlled year and month to display. Use in combination with onYearMonthChange. Makes year/month navigation controlled.

Was this section helpful?

Basic DatePicker

import {
reactExtension,
DatePicker,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return <DatePicker selected="2021-06-01" />;
}

Preview

By adhering to these design guidelines, the DatePicker component can offer a seamless and efficient method for users to select dates, thereby enhancing the overall user experience.

  • Default to showing today’s date if available.

  • Display the first available date when selecting future dates.

  • To minimize errors, the process of selecting a date range may require multiple steps. Therefore, providing a way for users to explicitly confirm their selection is recommended.

When to use a DatePicker

The DatePicker component is well-suited for the following scenarios:

  • Specifying shipping or delivery dates

  • Scheduling pick-up dates

  • Booking dates for service providers

  • Selecting event dates for ticket offerings

  • Specifying rental dates to determine start and end dates for renting a product

When not to use a DatePicker component

A DatePicker component might not be the most appropriate choice in the following situations:

  • When the date to be entered is several years in the future or the past.

  • When the date is easily memorable and can be quickly typed using the keyboard e.g. Date of birth.

Was this section helpful?