Usage

Props

Name	Type	Required	Description
beforeHide	BeforeCallback	false	The callback to run before the overlay is hidden. Returning `false` will prevent hiding. `(e: event) => boolean \| Promise \| undefined` since 10.19.0
beforeShow	BeforeCallback	false	The callback to run before the overlay is shown. Returning `false` will prevent showing. `(e: event) => boolean \| Promise \| undefined` since 10.19.0
className	string	false	Additional classNames
disabled	boolean	false	since 10.19.0
error	boolean	false	Error variant default false since 10.19.0
tabIndex	number	false	since 10.19.0
value	Date	false	since 10.19.0
variant	DateInputVariant	false	since 10.19.0
afterHide	Function	false
afterShow	Function	false
disabledDate	Function	false	since 10.19.0
onChange	Function	false	since 10.19.0
onClear	Function	false	since 10.19.0

onChange

disabled

disabledDate

Disable dates in the calendar selection. We like to use this with helpers from date-fns.

When looking to compare a random day against today, the second argument returns the start of today as if it happened in the time zone of the DateTimeProvider context.

error

onClear

Reset to today when the user clicks the clear icon.

Time Zone

Outreach and Collaboration Required

Time zone shifting is in beta and is necessary for improving and standardizing date management and storage that affect everyone in Product & Technology. Collaboration between an app team, localization, and design system is strongly encouraged so we can make steps towards improving utilities or documention (Core Docs or elsewhere like Data Migration guides) for everyone.

This component can apply time shifts based on the DateTimeProvider context timeZone. For more on working with time zones, please review the date time guide and the demos.

IE11 Requires Time Zone polyfill

Core React uses the brower's Intl DateTimeFormatAPIs in tandem with date-fns and date-fns-tz. In order to support IE11, client applications will require a polyfill to enable time zone features.

Time Zone Console Logging

Enable time zone console logging by setting the environment variable TZ_LOG to true. This can be used during development to compare inputs and outputs of date shifting.

In the example below, "today" to the current user might be the former day of "today" in Sydney, Australia. Notice when selecting the same date in each one, the display is the same but raw value is different.

Locale

Using the I18nProvider, DateSelect will order the month, day, and year segments.

Locale: en

yyyy

Locale: en-CA

yyyy

Locale: fr-CA

aaaa

Locale: fr-FR

aaaa

Locale: es

aaaa

Locale: en-AE

yyyy

Locale: en-AU

yyyy

Locale: en-GB

yyyy

Locale: en-SG

yyyy

Locale: ko

yyyy

Locale: th-TH

yyyy

Locale: pt

aaaa

Locale: is-IS

áááá

Locale: de-DE

jjjj

Locale: pseudo

yyyy

I18n

Advanced

Using OverlayTrigger callback methods