Documentation Index
Fetch the complete documentation index at: https://mintlify.com/zendeskgarden/website/llms.txt
Use this file to discover all available pages before exploring further.
Package: @zendeskgarden/react-datepickers
import { DatePicker, DatePickerRange } from '@zendeskgarden/react-datepickers';
import { Field, Input } from '@zendeskgarden/react-forms';
When to use it
- To select a single date, use
DatePicker.
- To select a start and an end date, use
DatePickerRange.
Basic usage
DatePicker wraps an Input and manages calendar state. Bind value and onChange for controlled usage.
import React, { useState } from 'react';
import { DatePicker } from '@zendeskgarden/react-datepickers';
import { Field, Input } from '@zendeskgarden/react-forms';
const Example = () => {
const [date, setDate] = useState(new Date());
return (
<Field>
<Field.Label>Select a date</Field.Label>
<DatePicker value={date} onChange={setDate}>
<Input />
</DatePicker>
</Field>
);
};
export default Example;
Date range picker
DatePickerRange manages two inputs and a shared calendar. Use DatePickerRange.Start and DatePickerRange.End to wrap each input, and DatePickerRange.Calendar to render the calendar.
import React, { useState } from 'react';
import { DatePickerRange } from '@zendeskgarden/react-datepickers';
import { Field, Input } from '@zendeskgarden/react-forms';
import { compareAsc, addDays } from 'date-fns';
const Example = () => {
const [startValue, setStartValue] = useState(new Date());
const [endValue, setEndValue] = useState(addDays(new Date(), 16));
const isInvalid = compareAsc(startValue, endValue) === 1;
return (
<DatePickerRange
startValue={startValue}
endValue={endValue}
onChange={changes => {
if (changes.startValue) setStartValue(changes.startValue);
if (changes.endValue) setEndValue(changes.endValue);
}}
>
<div style={{ display: 'flex', gap: 16 }}>
<Field>
<Field.Label>Start</Field.Label>
<DatePickerRange.Start>
<Input />
</DatePickerRange.Start>
</Field>
<Field>
<Field.Label>End</Field.Label>
<DatePickerRange.End>
<Input validation={isInvalid ? 'error' : undefined} />
</DatePickerRange.End>
{isInvalid && (
<Field.Message validation="error">
End date must occur after the start date
</Field.Message>
)}
</Field>
</div>
<DatePickerRange.Calendar />
</DatePickerRange>
);
};
export default Example;
Localization
Dates are formatted and parsed using the browser’s built-in Intl.DateTimeFormat API. Pass the locale prop to change the calendar and input language.
import React, { useState } from 'react';
import { DatePicker } from '@zendeskgarden/react-datepickers';
import { Field, Input } from '@zendeskgarden/react-forms';
const Example = () => {
const [date, setDate] = useState(new Date());
return (
<Field>
<Field.Label>Select a date</Field.Label>
<Field.Hint>Arabic localization</Field.Hint>
<DatePicker value={date} onChange={setDate} locale="ar-EG">
<Input lang="ar-EG" />
</DatePicker>
</Field>
);
};
export default Example;
For custom date formats beyond what Intl.DateTimeFormat supports, use the customParseDate prop alongside a formatting library such as date-fns or Day.js. Custom date format
Use the formatDate prop (or pair customParseDate with a library) to control how dates are displayed in the input.
import React, { useState } from 'react';
import { DatePicker } from '@zendeskgarden/react-datepickers';
import { Field, Input } from '@zendeskgarden/react-forms';
import { format, parse } from 'date-fns';
const Example = () => {
const [date, setDate] = useState(new Date());
return (
<Field>
<Field.Label>Select a date</Field.Label>
<DatePicker
value={date}
onChange={setDate}
formatDate={d => format(d, 'MM/dd/yyyy')}
customParseDate={str => parse(str, 'MM/dd/yyyy', new Date())}
>
<Input placeholder="MM/DD/YYYY" />
</DatePicker>
</Field>
);
};
export default Example;
Time window (min/max dates)
Disable dates outside an allowed range using minValue and maxValue.
import React, { useState } from 'react';
import { DatePicker } from '@zendeskgarden/react-datepickers';
import { Field, Input } from '@zendeskgarden/react-forms';
import { addDays, subDays } from 'date-fns';
const Example = () => {
const [date, setDate] = useState(new Date());
const today = new Date();
return (
<Field>
<Field.Label>Select a date</Field.Label>
<Field.Hint>Available dates: next 30 days only</Field.Hint>
<DatePicker
value={date}
onChange={setDate}
minValue={today}
maxValue={addDays(today, 30)}
>
<Input />
</DatePicker>
</Field>
);
};
export default Example;
Compact size
Use isCompact to render a smaller DatePicker.
import React, { useState } from 'react';
import { DatePicker } from '@zendeskgarden/react-datepickers';
import { Field, Input } from '@zendeskgarden/react-forms';
const Example = () => {
const [date, setDate] = useState(new Date());
return (
<Field>
<Field.Label>Select a date</Field.Label>
<DatePicker value={date} onChange={setDate} isCompact>
<Input isCompact />
</DatePicker>
</Field>
);
};
export default Example;
Component structure
{/* Single date */}
<Field>
<Field.Label />
<DatePicker value={date} onChange={setDate}>
<Input />
</DatePicker>
</Field>
{/* Date range */}
<DatePickerRange startValue={start} endValue={end} onChange={handleChange}>
<Field>
<Field.Label />
<DatePickerRange.Start>
<Input />
</DatePickerRange.Start>
</Field>
<Field>
<Field.Label />
<DatePickerRange.End>
<Input />
</DatePickerRange.End>
</Field>
<DatePickerRange.Calendar />
</DatePickerRange>
API reference
DatePicker
Manages the calendar state for a single date. Nest an Input as its child.
The currently selected date (controlled usage).
Called with the newly selected Date when the user makes a selection.
A BCP 47 language tag (e.g. "ar-EG", "fr-FR") passed to Intl.DateTimeFormat for calendar and input localization.
Custom function for formatting the date displayed in the input.
body.customParseDate
(inputValue: string) => Date
Custom function for parsing the string typed into the input back into a Date.
Disables calendar dates before this value.
Disables calendar dates after this value.
Renders a smaller calendar and input.
DatePickerRange
Manages start and end date state for a range selection. Nest DatePickerRange.Start, DatePickerRange.End, and DatePickerRange.Calendar as children.
The currently selected start date.
The currently selected end date.
body.onChange
(changes: { startValue?: Date; endValue?: Date }) => void
Called when the user selects a start or end date.
Renders a smaller calendar and inputs.
DatePickerRange.Start
Wraps the start date Input. Nest inside DatePickerRange.
DatePickerRange.End
Wraps the end date Input. Nest inside DatePickerRange.
DatePickerRange.Calendar
Renders the shared date range calendar. Nest inside DatePickerRange.