Headless

headless パッケージ (react-date-range-picker-headless) は、スタイルのないフックとコンテキストプロバイダーを提供します。これには、すべての状態管理、カレンダーロジック、キーボードナビゲーション、およびアクセシビリティ機能が含まれていますが、CSSやマークアップに関する意見は一切含まれていません。

あなたは独自のUIを持ち込みます。

インストール

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開閉動作付きのタイムピッカー

次のステップ