@eisgs/datepicker v4.0.2

Базовый Datepicker

Компонент в качестве параметра принимает значения типа string или Date. Если тип string, то значение будет парсится в формате DD.MM.YYYY.

const [value, setValue] = React.useState(new Date());

<div className="w400">
  <Datepicker 
    label="Дата" 
    hint="Подсказка" 
    placeholder="Выберите дату" 
    value={value} 
    onChange={setValue} 
  />
</div>

Ограничения на ввод

В параметрах min и max указывается минимальная и максимальная возможная дата.

error - строка с текстом ошибки.

import dayjs from 'dayjs';
import isToday from 'dayjs/plugin/isToday';

dayjs.extend(isToday);

const [value, setValue] = React.useState();
const [error, setError] = React.useState('');

const handleChange = (value) => {
  setValue(value);

  if (dayjs(value).isToday()) {
    setError('Нельзя выбрать сегодняшнюю дату');
  } else {
    setError('');
  }
};

<div className="w400" style={{ marginBottom: '20px' }}>
  <Datepicker
    min={dayjs().startOf('month').toDate()}
    max={dayjs().endOf('month').toDate()}
    label="Дата"
    error={error}
    value={value}
    onChange={handleChange}
    placeholder="Введите любую дату, кроме сегодняшней"
  />
</div>

Заблокированное состояние

Если флаг disabled передан со значением true, то возможность изменения поля блокируется.

const [value, setValue] = React.useState();

<div className="w400">
  <Datepicker
    disabled
    label="Дата"
    placeholder="Введите дату"
    value={value}
    onChange={setValue}
  />
</div>

Rangepicker

Принимает массив в качестве value.

import dayjs from 'dayjs';
import { Rangepicker } from '@eisgs/datepicker';

const [value, setValue] = React.useState();

<div className="w400">
  <Rangepicker
    label="Дата"
    value={value}
    min={dayjs().startOf('month').toDate()}
    max={dayjs().endOf('month').toDate()}
    onChange={setValue}
  />
</div>

Align

Параметр align отвечает за выравнивание выпадающего окна, возможные значения - left(по умолчанию) и right

import { Radio } from "@eisgs/radio";

const options = [
  { id: 1, description: 'Left', code: 'left' },
  { id: 2, description: 'Right', code: 'right' },
];

const [value, setValue] = React.useState(new Date());
const [align, setAlign] = React.useState(options[0].code);

<div className="w400">
  <Radio
    label="Выравнивание"    
    options={options} 
    onChange={setAlign}
    value={align}
  />
  <Datepicker
    label="Дата"
    hint="Подсказка"
    placeholder="Выберите дату"
    value={value}
    onChange={setValue}
    align={align}
  />
</div>