Date picker
A Date picker lets users select a date by showing them a calendar. It works in combination with a text input.
- 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 using a library like date-fns.
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.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-datepickers
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Datepicker, DatepickerRange } from '@zendeskgarden/react-datepickers'
API
Datepicker
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
customParseDate | – | Overrides default date parsing Parameters inputValue A localized input valueReturns 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 dateReturns 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 | 'start' | 'end' | 'auto' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'end-top' | 'end-bottom' | 'start-top' | 'start-bottom' | '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 |
weekStartsOn | 0 | 5 | 4 | 3 | 6 | 2 | 1 | – | Overrides the locale default start day of week |
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 stringReturns parsed date | |
endValue | Date | – | Sets the end date |
formatDate | – | Customizes the input element's date formatting Parameters date The selected dateReturns 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 datesvalues.startValue Optional start datevalues.endValue Optional end date | |
startValue | Date | – | Sets the start date |
weekStartsOn | 0 | 5 | 4 | 3 | 6 | 2 | 1 | – | Overrides the locale default start day of week |
DatepickerRange.Calendar
Extends HTMLAttributes<HTMLDivElement>