@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