LeafyGreen UI Kit Date Picker
npm install @leafygreen-ui/date-picker``shell`
pnpm add @leafygreen-ui/date-picker
`shell`
yarn add @leafygreen-ui/date-picker
`shell`
npm install @leafygreen-ui/date-picker
`js
import { DatePicker } from '@leafygreen-ui/date-picker';
const [date, setDate] = useState
value={date}
max={new Date("2026-12-26")}
onDateChange={setDate}
locale="iso-8601"
timeZone="utc"
/>;
`
| Prop | Type | Description | Default |
| ------------------ | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| label | ReactNode | Label shown above the date picker. | |description
| | ReactNode | A description for the date picker. It's recommended to set a meaningful time zone representation as the description. (e.g. "Coordinated Universal Time") | |locale
| | 'iso-8601'\| 'string' | Sets the _presentation format_ for the displayed date, and localizes month & weekday labels. Defaults to the user’s browser preference (if available), otherwise ISO-8601. | iso8601 |timeZone
| | string | A valid IANA timezone string, or UTC offset, used to calculate initial values. Defaults to the user’s browser settings. |min
| | Date | The earliest date accepted, in UTC | |max
| | Date | The latest date accepted, in UTC | |value
| | 'Date' \| 'InvalidDate' \| 'null' | The selected date. Note that this Date object will be read as UTC time. Providing Date.now() could result in the incorrect date being displayed, depending on the system time zone. value
To set to today, regardless of timeZone, use setToUTCMidnight(new Date(Date.now())). 2023-12-31
e.g. at 20:00 in Los Angeles, will be 2024-01-01 at 04:00 in UTC. To set the correct day (2023-12-31) as the DatePicker value we must first convert our local timestamp to 2023-12-31 at midnight | |onDateChange
| | (value?: Date \| InvalidDate \| null) => void | Callback fired when the user makes a value change. Fired on click of a new date in the menu, or on keydown if the input contains a valid date. null
_Not_ fired when a date segment changes, but does not create a full date
Callback date argument will be a Date object in UTC time, or | |initialValue
| | 'Date' \| 'InvalidDate' \| 'null' | The initial selected date. Ignored if value is provided value
Note that this Date object will be read as UTC time. See prop documentation for more details | |handleValidation
| | (value?: Date \| InvalidDate \| null) => void | A callback fired when validation should run, based on form validation guidelines. Use this callback to compute the correct state and errorMessage value.null
Callback date argument will be a Date object in UTC time, or | |onChange
| | (event: ChangeEvent | Callback fired when any segment changes, (but not necessarily a full value) | |baseFontSize
| | '13' \| '16' | The base font size of the input. Inherits from the nearest LeafyGreenProvider | |disabled
| | boolean | Whether the input is disabled. _Note_: will not set the disabled attribute on an input and the calendar menu will not open if disabled is set to true. | false |size
| | 'small' \| 'xsmall' \| 'default' \| 'large' | Whether the input is disabled. Note: will not set the disabled attribute on an input and the calendar menu will not open if disabled is set to true. | default |state
| | 'none' \| 'error' | Whether to show an error message | none |errorMessage
| | string | A message to show in red underneath the input when state is Error | |initialOpen
| | boolean | Whether the calendar menu is initially open. _Note_: The calendar menu will not open if disabled is set to true. | false |autoComplete
| | 'off' \| 'on' \| 'bday' | Whether the input should autofill | off |darkMode
| | boolean | Render the component in dark mode. | false |
Date Picker extends Popover props but omits the following props: active, children, className, dismissMode, onClick, onToggle, popoverZIndex, portalClassName, portalContainer, portalRef, refEl, renderMode, and scrollContainer.
The pattern in which a string stores date (& time) information. E.g. “YYYY-DD-MM”, “MM/DD/YYYY”, “YYYY-MM-DDTHH:mm:ss.sssZ”
The format of the date string passed into the component. This will typically be ISO-8601, but could be any format accepted by the Date constructor.
The format in which the date is presented to the user. By default, the HTML date input element presents this in the format of the user’s Locale (as defined in browser or OS settings).
Language, script, & region information. Can also include other data.
A string representing a user’s local time zone (e.g. “America/New_York”) or UTC offset. Valid time zones are defined by IANA, and listed on Wikipedia. A UTC offset can be provided in a DateTime string.
The offset of a time zone vs UTC. E.g. The UTC offset for “America/New_York” is -5:00, (or -4:00 depending on daylight savings).
The time zone information contained in the date string/object passed into the component.
The time zone relative to which we present date information to the user. Can result in a different day than the wire time zone. E.g. “2023-08-08T00:00:00Z” (Aug. 8/2023 at midnight UTC) => “2023-08-07T20:00:00-04:00” (Aug. 7 at 8pm EDT)
Either label or aria-labelledby or aria-label` must be provided, or there will be a console error. This is to ensure that screenreaders have a description for what the DatePicker does.