Headless (без интерфейса)

Headless-пакет (react-date-range-picker-headless) предоставляет нестилизованные хуки и провайдеры контекста. Он содержит всю логику управления состоянием, календарём, навигацией с клавиатуры и доступностью, но не имеет никакого CSS и не навязывает определённую разметку.

Вы создаёте свой собственный интерфейс.

Установка

npm install react-date-range-picker-headless

Когда использовать Headless

  • У вас есть дизайн-система с собственной библиотекой компонентов
  • Вам нужен полный контроль над каждым элементом с точностью до пикселя
  • Вы создаёте кастомный выбор даты для конкретного случая использования
  • Вы хотите интегрироваться с CSS-фреймворком, который не поддерживается стилизованными пакетами

Если вам нужны готовые к использованию стилизованные компоненты, смотрите Styled, Tailwind v4 или Tailwind v3.

Как это работает

  1. Выберите хук в зависимости от вашего сценария использования
  2. Передайте опции (value, onChange, config)
  3. Получите обратно состояние и обработчики
  4. Отрендерьте свой собственный UI, используя полученные значения
import { useState } from "react";
import { useDatePicker } from "react-date-range-picker-headless";
function MyDatePicker() {
  const [value, setValue] = useState<Date | null>(null);


  const {
    isOpen,
    calendar,
    getDayProps,
    displayValue,
    handleToggle,
    handleDateClick,
    handleConfirm,
    handlePrevMonth,
    handleNextMonth,
    locale,
  } = useDatePicker({ value, onChange: setValue });


  return (
    <div>
      <button onClick={handleToggle}>{displayValue || locale.placeholder}</button>
      {isOpen && (
        <div>
          <div>
            <button onClick={handlePrevMonth}>{locale.prevMonth}</button>
            <span>{locale.formatMonthYear(calendar.month)}</span>
            <button onClick={handleNextMonth}>{locale.nextMonth}</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }}>
            {calendar.weeks.flat().map((day, i) => {
              if (!day) return <span key={i} />;
              const props = getDayProps(day);
              return (
                <button
                  key={i}
                  onClick={() => handleDateClick(day)}
                  style={{
                    background: props.isSelected ? "#0ea5e9" : "transparent",
                    color: props.isDisabled ? "#ccc" : props.isToday ? "#0ea5e9" : "inherit",
                  }}
                >
                  {props.day}
                </button>
              );
            })}
          </div>
          <button onClick={handleConfirm}>{locale.confirm}</button>
        </div>
      )}
    </div>
  );
}

Доступные хуки

ХукСценарий использования
useDatePickerВыбор одной даты
useDateRangePickerВыбор диапазона дат с двумя календарями
useDateTimePickerВыбор даты и времени
useDateRangeTimePickerВыбор диапазона дат и времени
useTimePickerКолесо прокрутки только для времени
useStandaloneTimePickerВыбор времени с поведением открытия/закрытия

Следующие шаги