---
name: 'Field: Date'
route: /components/common/forms/form-field-date
menu: Forms
edit: false
---

import { Playground, Props } from 'docz'
import { State, Toggle } from 'react-powerplug'
import FormFieldDate from './form-field-date'

# FormFieldDate
**SUBCATEGORY:** Forms

<hr />

## Date field
### Description
For a date value. Often includes a built-in browser date picker.

**Default**
<Playground>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldDate
      {...state}
      labelText="Label"
      id="123"
      onChange={e => {
            console.log(e, 'changed')
            setState({ value: e.target.value })
        }
      }
    />
  )}
</State>
</Playground>

**Optional**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldDate
      {...state}
      labelText="Label"
      labelTag="Tag"
      id="123"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Max and min values (disabled month and year)**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldDate
      {...state}
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
      min="2020-04-01"
      max="2020-04-20"
   />
  )}
  </State>
</Playground>

**Helper**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldDate
      {...state}
      helperText="Helper text"
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Validation**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldDate
      {...state}
      error="Notice"
      labelText="Label"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Disabled**
<Playground>
    <FormFieldDate
      labelText="Label"
      id="123"
      value="1234"
      disabled />
</Playground>

<hr />

## Date field (adjacent)
### Description
For a date value. Often includes a built-in browser date picker.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

**Default**
<Playground>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldDate
      adjacent
      {...state}
      labelText="Label"
      id="123"
      onChange={e => {
            console.log(e, 'changed')
            setState({ value: e.target.value })
        }
      }
    />
  )}
</State>
</Playground>

<hr />

## Date field (slim)
### Description
For a date value. Often includes a built-in browser date picker.

**Default**
<Playground>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldDate
      slim
      {...state}
      labelText="Label"
      id="123"
      onChange={e => {
        console.log(e, 'changed')
        setState({ value: e.target.value })
        }
      }
    />
  )}
</State>
</Playground>

**Optional**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldDate
      {...state}
      labelText="Label"
      labelTag="Tag"
      id="123"
      onChange={e => setState({ value: e.target.value })}
      slim
   />
  )}
  </State>
</Playground>

**Max and min values (disabled month and year)**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldDate
      {...state}
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
      min="2020-04-01"
      max="2020-04-20"
      slim
   />
  )}
  </State>
</Playground>

**Helper**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldDate
      {...state}
      helperText="Helper text"
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
      slim
   />
  )}
  </State>
</Playground>

**Validation**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldDate
      {...state}
      error="Notice"
      labelText="Label"
      onChange={e => setState({ value: e.target.value })}
      slim
   />
  )}
  </State>
</Playground>

**Disabled**
<Playground>
  <FormFieldDate
    labelText="Label"
    id="123"
    slim
    value="1234"
    disabled />
</Playground>

## Date field (slim, adjacent)
### Description
For a date value. Often includes a built-in browser date picker.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

**Default**
<Playground>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldDate
      slim
      adjacent
      {...state}
      labelText="Label"
      id="123"
      onChange={e => {
        console.log(e, 'changed')
        setState({ value: e.target.value })
        }
      }
    />
  )}
</State>
</Playground>

## Properties
<Props of={FormFieldDate} />