---
name: DatePickerInput
menu: Inputs
---

import { Playground, PropsTable } from 'docz';
import { Formik, Field } from 'formik';

import { DatePickerInput, DatePickerInputComponent } from './';

# DatePickerInput

A React wrapper of [Flatpickr](https://flatpickr.js.org/).

<PropsTable of={DatePickerInputComponent} />

## Basic usage

<Playground>
  <Formik
    render={values => (
      <form>
        <pre>{JSON.stringify(values, null, 2)}</pre>
        <br />
        <Field name="myDate" component={DatePickerInput} />
      </form>
    )}
  />
</Playground>

## Primitive

<Playground>
  <DatePickerInputComponent onChange={value => console.log(value)} />
</Playground>
