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
- Name9.5.3•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 |
|---|---|---|---|
appendToNode | Element | DocumentFragment | Appends the calendar to the element provided | |
customParseDate | Overrides default date parsing Parameters inputValue A localized input value Returns parsed date | ||
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 |
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 | 'end' | 'start' | '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 |
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 |
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 | Customizes the input element's date formatting Parameters date The selected date Returns formatted date string | ||
isCompact | boolean | false | Applies compact styling |
locale | string | 'en-US' | Applies locale-based formatting. Accepts all valid |
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 values.startValue Optional start date values.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>