@zendeskgarden/react-datepickers

@zendeskgarden/react-datepickers

This package includes components relating to datepickers in the Garden Design System.

Installation

npm install @zendeskgarden/react-datepickers

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

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>;