Calendar

Особенности использования

Колбек onChange вызывается только при ручном выборе дат в календаре, при этом, если новые даты были прокинуты через пропсы, но противоречат логике компонента (endDate является более ранней датой, чем startDate), они будут выведены согласно логике календаря

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

<Calendar />

Тип Modern

<Calendar type="Modern" />

Задано количество месяцев в прошлое и в будущее

<Calendar type="Modern" futureMonthsCount={1} pastMonthsCount={1} direction="both" />

Задано количество месяцев только в будущее

<Calendar type="Modern" futureMonthsCount="6" direction="future" />

Задано количество месяцев только в прошлое

<Calendar type="Modern" pastMonthsCount={6} direction="past" />

Недоступен выбор до определенной даты (включительно)

<Calendar type="Modern" pastMonthsCount={1} direction="past" minBookingDate={minBookingDate} />

Недоступен выбор после определенной даты (включительно)

<Calendar type="Modern" futureMonthsCount={1} direction="future" maxBookingDate={maxBookingDateInCurrentMonth} />

Стилизованная обертка

<div style={{
  padding: '0 18px',
  margin: '24px auto',
  boxShadow: '0 2px 9px rgba(0, 0, 0, 0.15)',
  maxWidth: '320px',
}}>
  <Calendar />
</div>

Выбор одной даты

<Calendar isSingleDate />

Определение недоступного диапазона дат

Недоступен выбор до определенной даты (включительно)

<Calendar minBookingDate={minBookingDate} />

Недоступен выбор после определенной даты (включительно)

<Calendar maxBookingDate={maxBookingDateInCurrentMonth} />

Демо-данные
const date = new Date();
const currentMonth = date.getMonth();
const currentYear = date.getFullYear();
const minBookingDate = new Date(currentYear, currentMonth, 7);
const maxBookingDate = new Date(currentYear, currentMonth + 1, 20);
const maxBookingDateInCurrentMonth = new Date(currentYear, currentMonth, 20);

Предвыбранный диапазон дат

<DemoCalendarWithHandleChange>
  {({ onChange, startDate, endDate }) =>
      <Calendar onChange={onChange} startDate={startDate} endDate={endDate} />
  }
</DemoCalendarWithHandleChange>

Код DemoCalendarWithHandleChange
export const DemoCalendarWithHandleChange = ({ children }) => {
    const [from, setFrom] = React.useState<string | null>(formatDate(startDate, 'dd.MM.yyyy'));
    const [to, setTo] = React.useState<string | null>(formatDate(endDate, 'dd.MM.yyyy'));

    const onChange = (currentStartDate, currentEndDate) => {
        setFrom(formatDate(currentStartDate, 'dd.MM.yyyy'));
        setTo(currentEndDate ? formatDate(currentEndDate, 'dd.MM.yyyy') : currentEndDate);
    };

    return (
        <div style={{ textAlign: 'center' }}>
            <h3 style={{ marginBottom: '32px', fontSize: '18px' }}>
                {to ? `Выбран диапазон дат с ${from} до ${to}` : `Выбрана начальная дата ${from}`}
            </h3>
            {children({ onChange, startDate, endDate })}
        </div>
    );
};

Определение выбранных дат вне календаря

<DemoCalendarWithDatesChange>
  {({ startDate, endDate }) =>
      <Calendar startDate={startDate} endDate={endDate} />
  }
</DemoCalendarWithDatesChange>

Код DemoCalendarWithDatesChange
export const DemoCalendarWithDatesChange = ({ children }) => {
    const startDate = new Date(2020, 1, 7);
    const endDate = new Date(2020, 1, 19);

    const [period, setPeriod] = React.useState({ periodStart: startDate, periodEnd: endDate });

    const onChange = (firstDate, secondDate) => () =>
        setPeriod({ periodStart: firstDate, periodEnd: secondDate });

    const { periodEnd, periodStart } = period;

    return (
        <>
            {children({ startDate: periodStart, endDate: periodEnd })}
            <div>
                <div style={{ display: 'inline-block', marginRight: '12px' }}>
                    <Button onClick={onChange(new Date(2020, 0, 1), new Date(2020, 0, 31))}>
                        Январь
                    </Button>
                </div>
                <Button onClick={onChange(new Date(2020, 1, 1), new Date(2020, 1, 29))}>
                    Февраль
                </Button>
            </div>
        </>
    );
};