---
name: DateInput
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import DateInput from './DateInput'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# DateInput

The `DateInput` component is a cross-browser implementation of an `<input type="date" />` with a built in picker.

If `format` is not provided, the component will default to match the provided type.

| type       | assumed format     |
| ---------- | ------------------ |
| `date`     | `YYYY-MM-dd`       |
| `datetime` | `YYYY-MM-dd HH:mm` |
| `time`     | `HH:mm`            |

When `value` is provided as a prop (i.e. controlled), the value will be raised as a Date or string to match the provided type. For example, `onChange` will be called with a date string when `props.value` is also a string. Additionally, if `props.value` is `undefined` it will be raised as a string, but if `props.value` is `null` it will be raised as a `Date`.

The `onChange` handler is called when any of the date's individual fields is changed,
even if that change makes the date invalid: for example if the month is changed to
February when the day is already 31. Whenever `onChange` is called with an invalid
or partially-filled-out date, `event.target.value` is set to JavaScript's `NaN` value.
When `NaN` is passed back to the `value` prop, the date input's internal state
is unchanged: this allows using the standard "controlled input pattern", without
overwriting any in-progress changes the user may be making.

### Try it out

export const code = `<DateInput id="date-input-uncontrolled" name="date" onChange={({ target: { name, value } })=> console.log(name, value)}/>`

<LiveProvider code={code} scope={{ DateInput }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Best practices

It is idiomatic React to "control" the value as described above.

It is best to use the `DateInputField` component instead of this more atomic level because it comes with accessibility baked in.

One should avoid changing the type on a rendered DateInput after intial render -- if this is necessary we recommend also providing the format.

## Basic usage

```jsx
<DateInput id="date-input" name="date" />
```

## Properties

Note that `value` accepts numbers for the sake of the sentinel value `NaN` which
indicates invalid/partial dates; since Typescript doesn't have a specific `NaN`
type, however, other numbers are also valid, and treated as equivalent to `new Date(number)`.

<PropsTable of={DateInput} />