useTimePicker

用於滾輪式時間選擇器的低階掛鉤。管理基於滾動的時、分、秒選擇，並具有對齊行為。此掛鉤通常由時間面板 UI 內部使用，但也可以直接用於自訂時間選擇器的實現。

匯入

import { useTimePicker } from "react-date-range-picker-headless";

使用方式

import { useState } from "react";
import { useTimePicker } from "react-date-range-picker-headless";


function MyTimePicker() {
  const [hour, setHour] = useState(12);
  const [minute, setMinute] = useState(0);


  const picker = useTimePicker({
    hour,
    minute,
    onHourChange: setHour,
    onMinuteChange: setMinute,
    precision: "minute",
    hourFormat: "24",
    minuteStep: 5,
  });


  return (
    <div style={{ display: "flex", gap: 8 }}>
      {/* 小時欄 */}
      <div
        ref={picker.hourListRef}
        onScroll={picker.handleHourScroll}
        style={{ height: picker.itemHeight * 5, overflow: "auto" }}
      >
        {picker.hours.map((h) => (
          <div
            key={h}
            onClick={() => picker.handleHourClick(h)}
            style={{
              height: picker.itemHeight,
              fontWeight: h === hour ? "bold" : "normal",
            }}
          >
            {String(h).padStart(2, "0")}
          </div>
        ))}
      </div>


      {/* 分鐘欄 */}
      {picker.showMinutes && (
        <div
          ref={picker.minuteListRef}
          onScroll={picker.handleMinuteScroll}
          style={{ height: picker.itemHeight * 5, overflow: "auto" }}
        >
          {picker.minutes.map((m) => (
            <div
              key={m}
              onClick={() => picker.handleMinuteClick(m)}
              style={{
                height: picker.itemHeight,
                fontWeight: m === minute ? "bold" : "normal",
              }}
            >
              {String(m).padStart(2, "0")}
            </div>
          ))}
        </div>
      )}


      {/* 上下午切換 (12 小時制) */}
      {picker.is12Hour && <button onClick={picker.handlePeriodToggle}>{picker.period}</button>}
    </div>
  );
}

選項

選項類型預設值說明
hournumber—必要。 目前小時。24 小時制：0-23，12 小時制：1-12。
minutenumber—必要。 目前分鐘。
secondnumber—目前秒數。
periodTimePeriod—目前的 AM/PM 時段 (12 小時制為必要)。
onHourChange(hour: number) => void—必要。 小時變更處理常式。
onMinuteChange(minute: number) => void—必要。 分鐘變更處理常式。
onSecondChange(second: number) => void—秒數變更處理常式。
onPeriodChange(period: TimePeriod) => void—AM/PM 變更處理常式。
precisionTimePrecision"minute"時間精度："hour"、"minute" 或 "second"。
hourFormatHourFormat"24""12" 或 "24" 小時格式。
minuteStepMinuteStep5分鐘遞增步長。
secondStepSecondStep1秒數遞增步長。
itemHeightnumber32每個滾動項目的高度 (以 px 為單位)。

回傳值

名稱類型說明