useTimePicker

Hook de bas niveau pour le sélecteur d’heure à molette. Gère la sélection des heures/minutes/secondes par défilement avec un comportement d’accrochage. Ce hook est généralement utilisé en interne par l’interface utilisateur du panneau de l’heure, mais peut être utilisé directement pour des implémentations de sélecteur d’heure personnalisées.

Importation

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

Utilisation

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 }}>
      {/* Colonne des heures */}
      <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>


      {/* Colonne des minutes */}
      {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>
      )}


      {/* Bascule de période (mode 12 heures) */}
      {picker.is12Hour && <button onClick={picker.handlePeriodToggle}>{picker.period}</button>}
    </div>
  );
}

Options

| Option | Type | Défaut | Description