useTimePicker

스크롤 휠 타임 피커를 위한 로우레벨(low-level) 훅입니다. 스크롤 기반의 시/분/초 선택과 스냅 동작을 관리합니다. 이 훅은 일반적으로 시간 패널 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 단위).

반환 값

|