---
name: DatePicker
menu: Components
route: /components/date-picker
---

import { Playground, PropsTable } from 'docz'
import { ReactDatePicker, ReactDateRangePicker } from '@personio/ui-components'

# Date and Datepicker Components
These datepickers is built on top of [flatpickr](https://flatpickr.js.org/).

# React Version

## Single Datepicker 

<Playground>
  <ReactDatePicker
    onDateChange={val => console.log(val)}
    dateFormat="DD-MM-YYYY"
    title="awesome datepicker"
    initialDate={new Date('2019-01-01')}
    inputClassName="custom-input-classname"
    onFocus={() => console.log('focus')}
    onBlur={() => console.log('blur')}
    flatpickrOptions={{
      minDate: new Date(),
      maxDate: new Date('2019-07-15'),
      disable: [new Date('2019-07-12'), new Date('2019-07-10')]
    }}
  />
</Playground>

### Available Props
Props | Type | Mandatory | Default | Desc 
:--- | :--- | :--- | :--- | :---
onDateChange | `(Date | undefined) => void` | Yes | - | onDateChange hooks, will called with `undefined` if the date is ivalid
selected | `Date` | No | `undefined` | supply this value for controlled component
onBlur | `Function` | No | - | onBlur event
onFocus | `Function` | No | - | onFocus event
locale | `'en' | 'de' | 'es'` | No |`en` | Set datepicker locale
inputClassName | `string` | No | `undefined` | Input component className
inputWrapperClassName | `string` | No | `undefined` | Input component wrapper className
dateFormat | `string` | No |`DD.MM.YYYY` | Please refer to date format section
initialDate | `Date` | No |`null` | Set initial value of the date picker
title | `String` | No |`''` | Datepicker title
onTitleClick | `() => void` | No |`undefined` | onClick title handler function
disableCloseOnSelectDate | `Boolean` | No |`false` | Close datepicker after selecting date
disableCloseOnClickOutside | `Boolean` | No |`false` | Close datepicker on click outside the calendar wrapper
flatpickrOptions | `Object` | No | `{}` | Other flatpickr options that passed to the flatpickr instance [see available options](https://flatpickr.js.org/options/)

## Date Range Picker

<Playground>
  <ReactDateRangePicker 
    onDateChange={(val) => console.log(val)}
    separator=" to "
    dateFormat="DD-MM-YYYY"
    placeholder="This is date range placeholder"
    initialDate={[new Date(), new Date()]}
    flatpickrOptions={{
      minDate: new Date('2019-01-01'),
      maxDate: new Date('2019-12-31'),
    }}
  />
</Playground>

### Available Props
Props | Type | Mandatory | Default | Desc 
:--- | :--- | :--- | :--- | :---
onDateChange | `([Date | undefined, Date | undefined]) => void` | Yes | undefined | onDateChange hooks, might called with `[undefined, undefined]` if the date is invalid
onBlur | `Function` | No | - | onBlur event
onFocus | `Function` | No | - | onFocus event
locale | `'en' | 'de' | 'es'` | No | `'en'` | Set datepicker locale
initialDate | `[dateFrom: Date, dateTo: Date]` | No | `undefined` | Set the initial value of the datepicker
separator | `string` | No | `'-'` | Separator between dateFrom and dateTo
inputClassName | `string` | No | `undefined` | Input component className
inputWrapperClassName | `string` | No | `undefined` | Input component wrapper className
dateFormat | `string` | No |`DD.MM.YYYY` | Please refer to date format section
initialDate | `[dateFrom: Date, dateTo: Date]` | No |`null` | Set initial value of the date picker
title | `String` | No |'' | Datepicker title
onTitleClick | `Function` | No | '' | onClick title handler function
flatpickrOptions | `Object` | No | `{}` | Other flatpickr options that passed to the flatpickr instance [see available options](https://flatpickr.js.org/options/)


# Date format
Accepted format: moment format (using `DD`, `MM`, `YY`,  `YYYY`) and flatpickr format.

Example accepted format (example date is 02 Jan 2019):
- `DD:MM:YYYY` => 02:01:2019
- `DD:MM:YY` => 02:01:19
- `YYYY.MM.DD` => 2019:01:02
- `Y.m.d` => 2019.01.02
- `y.m.d` => 19.01.02

Internally, the dateFormat is transformed into flatpickr formatting token, please refer to [flatpickr formatting token](https://flatpickr.js.org/formatting/) and date format transformation dictionary on section below. You can also pass the token according to the flatpickr format standard. For example, `DD:MM:YYYY` will be transformed into `d:m:Y` and `DD/MM:YY` will be transformed into `d:m:y`.

## Date format transformation dictionary
- DD -> d
- MM -> m
- YY -> y
- YYYY -> Y

# Technical Notes

In the flatpickr library, you have to do this to set the `locale`:

```
import Flatpickr from 'flatpickr';
import { German } from 'flatpickr/dist/l10n/de'

const input = document.getElementbyId('datepicker');
const options = {
  locale: German
}
const datepicker = new Flatpickr(input, options)
```

However, in our implementation, it is abstracted into locale prop (in the react wrapper) and locale option (in the javascript wrapper) which received `en` or `de` value to make it more intuitive.

