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, Label, Input } from '@zendeskgarden/react-forms';
import { Datepicker } from '@zendeskgarden/react-datepickers';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Field>
    <Label>Example datepicker</Label>
    <Datepicker value={new Date()} onChange={selectedDate => console.log(selectedDate)}>
      <Input />
    </Datepicker>
  </Field>
</ThemeProvider>;