DateSelect

ReactDesign Guidelines

Usage

Props

NameTypeRequiredDefaultDescription
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

mm
dd
yyyy

Locale: de-DE

tt
MM
jjjj

Locale: en-CA

mm
dd
yyyy

Locale: fr-CA

aaaa
mm
jj

Locale: fr-FR

jj
mm
aaaa

Locale: es

dd
mm
aaaa

Locale: es-ES

dd
mm
aaaa

Locale: en-AU

dd
mm
yyyy

Locale: en-AE

dd
mm
yyyy

Locale: en-GB

dd
mm
yyyy

Locale: en-SG

dd
mm
yyyy

Locale: ja-JP

yyyy
mm
dd

Locale: th-TH

dd
mm
yyyy

Locale: pt-BR

dd
mm
aaaa

Locale: is-IS

dd
mm
áááá

Locale: zh-SG

yyyy
mm
dd

Locale: pseudo

dd
mm
yyyy


I18n

Advanced

Using OverlayTrigger callback methods