# @n3/react-date-picker

Поле для выбора даты (интервала дат)

## Установка

```
# Рекомендуется использовать yarn, так как добавлен yarn.lock
yarn add @n3/react-date-picker
```

или
```
npm install @n3/react-date-picker
```

## Использование

Подключить стили:
```javascript
import '@n3/react-date-picker/dist/n3-date-picker.css'
```

Использовать компонент
```javascript
import React, { useState } from 'react';
import DatePicker from '@n3/react-date-picker';

const DatePickerWrapper = (props) => {
  const [value, setValue] = useState(null);

  return (
    <DatePicker
      {...props}
      value={value}
      onChange={setValue}
    />
  );
};

export default DatePickerWrapper;
```

## Свойства

| prop            |       type        | required |      default      | Description                                                                                                        |
|:----------------|:-----------------:|:--------:|:-----------------:|:-------------------------------------------------------------------------------------------------------------------|
| value           |       Date        |  false   |       null        | значение для компонента с одной датой (поле с одной датой)                                                         |
| from            |       Date        |  false   |       null        | значение для левого поля/левая часть временного интервала (поле с двумя датами)                                    |
| to              |       Date        |  false   |       null        | значение для правого поля/правая часть временного интервала (поле с двумя датами)                                  |
| range           |       bool        |  false   |       false       | компонент с одной датой или набор дат (диапазон)                                                                   |
| clear           |       bool        |  false   |       false       | возможность сбросить дату через кнопку-крестик в самом поле                                                        |
| onChange        |     function      |   true   |       null        | вызывается при изменении даты в каледаре                                                                           |
| minDate         |       Date        |  false   |       null        | минимальная дата                                                                                                   |
| maxDate         |       Date        |  false   |       null        | максимальная дата                                                                                                  |
| isDateDisabled  |     function      |  false   |       null        | возможность настроить блокировку нужных дат в календаре                                                            |
| locale          |       ru/en       |  false   |        ru         | установка локали                                                                                                   |
| displayFormat   |     function      |  false   | зависит от локали | преобразует значение Date в строковое представление                                                                |
| parseDate       |     function      |  false   | зависит от локали | функция преобразования строковых значений в объект Date                                                            |
| defaultFocus    | Date/[Date, Date] |  false   |   текущая дата    | Задаёт фокусировку календаря на нужную дату, если не установлено значение календаря (по умолчанию на текущую дату) |
| disabled        |      boolean      |  false   |       false       | Неактивное состояние компонента                                                                                    |
| isDateDisabled  |     function      |  false   |       null        | Функция, которая определяет доступен ли день в календаре для выбора                                                |


## Замечания

### Функция displayFormat

Функция displayFormat преобразует значение Date (value/from/to) в строковое представление. По умолчанию содержить реализацию для русской (ru) и английской локали (en).

```
 для русской локали преобразет в формат 05.04.2019
 для английской локали преобразет в формат 05/04/2019
```

### Функция parseDate

функция parseDate преобразует свойства value/from/to, значения текстового поля в объект Date. Если значение не может быть преобразовано в объект Date, возвращает null. По умолчанию содержить реализацию для русской (ru) и английской локали (en).

для русской локали принимает строковые значения
```
5.4
5.04
05.4
05.04
5 апр
5 Апреля
5.4.19
5.04.19
5 апр 19
5 Апреля 19
5.4.2019
5.04.2019
5 апр 2019
5 Апреля 2019
```

для английской локали принимает строковые значения
```
5/4
5/04
05/4
05/04
5-4
5-04
05-4
05-04
5 apr
5 April
5/4/2019
5/04/2019
5-4-2019
5-04-2019
5 apr 2019
5 April 2019
5/4/2019
5/04/2019
5-4-2019
5-04-2019
5 apr 2019
5 April 2019
```