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

import { Playground, PropsTable } from 'docz'
import { ReactDatePicker } from '@personio/ui-components'
import { DatePickerDemo } from './date-picker-demo'

## The Datepicker components
This datepicker component is built on top of [flatpickr](https://flatpickr.js.org/).

## Using The Datepicker

<DatePickerDemo />

### Example

```
import * as React from 'react';
import { DatePicker, InputText } from '@personio/ui-components';

export class DatePickerDemo extends React.Component {
  datePickerInstance: any

  componentDidMount() {
    this.renderDatePicker();
  }

  inputRef = React.createRef();

  onDateChange = (val) => {
    console.log(val);
  }

  onTitleClick = () => {
    console.log('title clicked');
  }

  renderDatePicker = (): void => {
    const options = {
      title: 'Go Back',
      onTitleClick: this.onTitleClick,
      onChange: this.onDateChange,
      closeOnSelectDate: false,
    };

    this.datePickerInstance = new DatePicker(this.inputRef.current.ref, options);
  }

  componentWillUnmount() {
    this.datePickerInstance.destroy();
  }

  render() {
    return (<InputText ref={this.inputRef} />);
  }
}

```

### Available Options
Option | Type | Default | Desc 
:--- | :--- | :--- | :---
locale | `'en' | 'de'` | null | Set datepicker locale
initialDate | `Date` | null | Set initial date of the date picker
title | `String` | '' | datepicker title
closeOnSelectDate | `Boolean` | true | close datepicker after selecting date
onChange | `Function` | null | onChange hooks
onTitleClick | `Function` | '' | on click title handler function

You can also pass other options and hooks based on [flatpickr's options](https://flatpickr.js.org/options/)

### The Datepicker instance

You can access the datepicker instance and invoke available methods.

Methods | Args | Desc 
:--- | :--- | :--- 
toggleWrapperShow | - | toggle datepicker
destroy | - | Destroy the instance, removing related htmlElement and remove events

### The flatpickr instance

If needed you can access the flatpickr instance.

```
import { DatePicker } from '@personio/ui-components'

const input = document.createElement('input');
options = {}

const datepicker = new DatePicker(input, options);

const flatpickrInstance = datepicker._flatPickrInstance
```

### Notes
You need to implement the style and date display on the input by yourself.

## Using the React Wrapper

There is also The react wrapper version available 😉

```
import { ReactDatePicker } from '@personio/ui-components'
```

<Playground>
  <ReactDatePicker 
    onDateChange={(val) => console.log(val)}
    inputProps={{
      value: 'Some input value'
    }}
    initialDate={new Date()}
  />
</Playground>

### Available Props
Props | Type | Default | Desc 
:--- | :--- | :--- | :---
onDateChange | `Function` | null | onDateChange hooks
locale | `'en' | 'de'` | null | Set datepicker locale
initialDate | `Date` | null | Set initial value of the date picker
title | `String` | '' | datepicker title
onTitleClick | `Function` | '' | on click title handler function
inputProps | `Object` | '' | Props to be passed on the input component
closeOnSelectDate | `Boolean` | true | close datepicker after selecting date
options | `Object` | null | other options available on [flatpickr's options](https://flatpickr.js.org/options/)

### Technical Implementation

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.