Table of Contents

Date picker

A Date picker lets users select a date by showing them a calendar. It works in combination with a text input.

Table of Contents

How to use it
Configuration
API
- Datepicker
- DatepickerRange

Used for this

To select a single date, use a Date picker
To select a start and an end date, use a Date picker range

How to use it

Default

The typical usage of a Date picker component.

Custom date format

Dates are formatted using the Intl.DateTimeFormat utility. For other formats, consider libraries like date-fns or momentjs.

Date range

Date range picker works in combination with two text inputs. It displays a calendar that lets users choose a start and end date.

Localization

Dates are localized using the Intl.DateTimeFormat utility. For other formats, use customParseDate prop, and formatting libraries like date-fns or momentjs.

Size

Date picker can be default or compact.

Time window

Options before and after a certain date can be disabled, limiting users to a specific time window.

Configuration

Name8.42.0•View source•View on npm
Installnpm install @zendeskgarden/react-datepickers
Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
Importimport { Datepicker, DatepickerRange, DatepickerRange.Start, DatepickerRange.End } from '@zendeskgarden/react-datepickers'

API

Datepicker

Prop name	Type	Default	Description
customParseDate		–	Overrides default date parsing Parameters `inputValue` A localized input value Returns parsed date
eventsEnabled	boolean	true	Allows the calendar to reposition during browser resize events
formatDate		–	Customizes the input element's date formatting Parameters `date` The selected date Returns formatted date string
isAnimated	boolean	true	Animates the calendar
isCompact	boolean	–	Applies compact styling
locale	string	'en-US'	Applies locale-based formatting. Accepts all valid `Intl` locales.
maxValue	Date	–	Disables dates after this value on the calendar
minValue	Date	–	Disables dates before this value on the calendar
onChange		–	Handles date change Parameters `date` The selected date
placement	GARDEN_PLACEMENT	bottom-start	Adjusts the position of the calendar
popperModifiers	Modifiers	–	Passes configuration options to the Popper instance
refKey	string	'ref'	Defines the ref key used to position the calendar
value	Date	–	Sets the selected date
zIndex	number	1000	Sets the `z-index` of the calendar

DatepickerRange

Prop name	Type	Default	Description
customParseDate		–	Overrides the default date parsing Parameters `inputValue` A date string Returns parsed date
endValue	Date	–	Sets the end date
formatDate		–	Adjusts the input element's date formatting Parameters `date` The selected date Returns formatted date string
isCompact	boolean	–	Applies compact styling
locale	string	'en-US'	Applies locale-based formatting. Accepts all valid `Intl` locales.
maxValue	Date	–	Disables dates after this value on the calendar
minValue	Date	–	Disables dates before this value on the calendar
onChange		–	Handles start and end date changes Parameters `values` The selected dates
startValue	Date	–	Sets the start date

DatepickerRange.Calendar

Extends HTMLAttributes<HTMLDivElement>