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

Anchor to datepickerpropsDatePickerProps

Anchor to selected
selected
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.

Anchor to yearMonth
yearMonth

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

Anchor to defaultYearMonth
defaultYearMonth

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 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?

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

Anchor to best-practicesBest Practices

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?