This package includes components relating to datepickers in the Garden Design System.
npm install @zendeskgarden/react-datepickers
# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming
The <DatePicker>
component allows users to select a
date with a dropdown selection or a variety of localizable
text formats. Internally, the <DatePicker>
uses date-fns
for it's date calculations and the Intl.DateTimeFormat utility
for localization support.
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Input } from '@zendeskgarden/react-forms';
import { DatePicker } from '@zendeskgarden/react-datepickers';
/**
* Place a `ThemeProvider` at the root of your React application
*/
<ThemeProvider>
<Field>
<Field.Label>Example datepicker</Field.Label>
<DatePicker value={new Date()} onChange={selectedDate => console.log(selectedDate)}>
<Input />
</DatePicker>
</Field>
</ThemeProvider>;