@n3/react-date-picker

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

Установка

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

или

npm install @n3/react-date-picker

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

Подключить стили:

import '@n3/react-date-picker/dist/n3-date-picker.css'

Использовать компонент

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