Headless

Gói headless (react-date-range-picker-headless) cung cấp các hook và context provider không có style. Nó chứa tất cả logic quản lý trạng thái, lịch, điều hướng bàn phím, và các tính năng trợ năng — nhưng hoàn toàn không có CSS hay định kiến về markup.

Bạn tự cung cấp giao diện người dùng của mình.

Cài đặt

npm install react-date-range-picker-headless

Khi nào nên dùng Headless

  • Bạn có một hệ thống thiết kế với thư viện component của riêng mình
  • Bạn muốn kiểm soát từng pixel của mọi phần tử
  • Bạn đang xây dựng một bộ chọn ngày tùy chỉnh cho một trường hợp sử dụng cụ thể
  • Bạn muốn tích hợp với một framework CSS không được các gói định kiểu hỗ trợ

Nếu bạn muốn các component đã được định kiểu sẵn sàng sử dụng, hãy xem Styled, Tailwind v4, hoặc Tailwind v3.

Cách hoạt động

  1. Chọn một hook dựa trên trường hợp sử dụng của bạn
  2. Truyền các tùy chọn (value, onChange, config)
  3. Nhận lại trạng thái và các trình xử lý
  4. Tạo giao diện người dùng của riêng bạn bằng các giá trị trả về
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>
  );
}

Các Hook có sẵn

HookTrường hợp sử dụng
useDatePickerChọn một ngày duy nhất
useDateRangePickerChọn khoảng ngày với lịch kép
useDateTimePickerChọn ngày + giờ
useDateRangeTimePickerChọn khoảng ngày + giờ
useTimePickerBánh xe cuộn chỉ chọn giờ
useStandaloneTimePickerBộ chọn giờ với hành vi mở/đóng

Các bước tiếp theo