---
name: Date Input
menu: Patterns
parent: Modules
route: /patterns/date-input
---

# Date Input

Date input helps users enter a memorable date. Dates can be presented with or without the day, and the year can be formatted presented in a two or four digit format.

```specimen-react
<DateInput
  dateKind="day-month-year"
  legend="Date of birth"
  yearFormat="four-digits"
/>
```

```specimen-research-insight
When asking for a date, make the fields match the format of the original. This will make it easier for users to copy it across accurately.

Ie. exactly as it’s shown on a passport, credit card or similar item, with the fields matching the format of the original.
```

## Variants

### Day month year

#### Four digit year

```specimen-react
<DateInput
  dateKind="day-month-year"
  legend="Date of birth"
  yearFormat="four-digits"
/>
```

```specimen-react
<DateInput
  dateKind="day-month-year"
  legend="Date of birth with value"
  yearFormat="four-digits"
  dayValue="01"
  monthValue="02"
  yearValue="2991"
/>
```

#### Two digit year

```specimen-react
<DateInput
  dateKind="day-month-year"
  legend="Date of birth"
  yearFormat="two-digits"
/>
```

### Month day year

#### Four digit year

```specimen-react
<DateInput
  dateKind="month-day-year"
  legend="Date of birth"
  yearFormat="four-digits"
/>
```

```specimen-react
<DateInput
  dateKind="month-day-year"
  legend="Date of birth with value"
  yearFormat="four-digits"
  dayValue="01"
  monthValue="02"
  yearValue="2991"
/>
```

#### Two digit year

```specimen-react
<DateInput
  dateKind="month-day-year"
  legend="Date of birth"
  yearFormat="two-digits"
/>
```

### Month year

#### Four digit year

```specimen-react
<DateInput
  dateKind="month-year"
  yearFormat="four-digits"
  legend="Expiry date"
  errorMessage="Expiry date cannot be in the past"
/>
```

#### Two digit year

```specimen-react
<DateInput
  dateKind="month-year"
  yearFormat="two-digits"
  legend="Expiry date"
/>
```

## Behaviour

#### Valid

```specimen-react
<DateInput
  dateKind="month-year"
  yearFormat="two-digits"
  legend="Expiry date"
  status="valid"
/>
```

#### Invalid

```specimen-react
<DateInput
  dateKind="month-year"
  yearFormat="two-digits"
  legend="Expiry date"
  status="invalid"
  errorMessage="Expiry date cannot be in the past"
/>
```

## Configurations

### Description

```specimen-react
<DateInput
  dateKind="month-year"
  yearFormat="two-digits"
  legend="Expiry date"
  description="The expiry date should be printed under at the bottom of the carton."
/>
```

### Custom labels

```specimen-react
<DateInput
  dateKind="month-year"
  yearFormat="two-digits"
  legend="Expiry date"
  fieldLabels={{ month: 'Mes', year: 'Año'}}
  description="The expiry date should be printed under at the bottom of the carton."
/>
```

## Editorial

### Validation error messages

#### Date of Birth

- Date of birth must be in the past
- Year must be four digits/two digits
- Month must be two digits
- Day must be two digits

#### Expiry date

- Expiry date must be in the future
- Year must be two digits
- Month must be two digits

## Implementation

There is no internal state, all validation should be handled externally by using the optional `handleDateFieldChange` and `status` props.
