타임 피커

TimePicker 컴파운드 컴포넌트를 사용하여 커스텀 시간 선택 UI를 구축할 수 있습니다. 이 예제에서는 표준 시간 패널과 푸터를 유지하면서 기본 트리거를 스타일이 적용된 버튼으로 대체합니다.

import { useState } from "react";
import { TimePicker } from "react-date-range-picker-tailwind4";

function CompoundTimePicker() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <TimePicker.Root value={value} onChange={setValue}>
      <TimePicker.Trigger>
        {({ displayValue, isOpen, onToggle, triggerRef }) => (
          <button
            ref={triggerRef as React.Ref<HTMLButtonElement>}
            onClick={onToggle}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "8px 12px",
              border: "1px solid #d1d5db",
              borderRadius: 6,
              background: isOpen ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 14,
            }}
          >
            <span style={{ fontSize: 18 }}>{"\uD83D\uDD52"}</span>
            <span>{displayValue || "Select time"}</span>
          </button>
        )}
      </TimePicker.Trigger>
      <TimePicker.Content>
        <TimePicker.TimePanel target="single" />
        <TimePicker.Footer>
          <TimePicker.ClearButton />
          <TimePicker.CancelButton />
          <TimePicker.ConfirmButton />
        </TimePicker.Footer>
      </TimePicker.Content>
    </TimePicker.Root>
  );
}

12시간 형식

time을 사용하여 12시간 형식을 구성할 수 있습니다:

import { useState } from "react";
import { TimePicker } from "react-date-range-picker-tailwind4";

function CompoundTimePickerTwelveHour() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <TimePicker.Root value={value} onChange={setValue} time={{ hourFormat: "12" }}>
      <TimePicker.Trigger>
        {({ displayValue, isOpen, onToggle, triggerRef }) => (
          <button
            ref={triggerRef as React.Ref<HTMLButtonElement>}
            onClick={onToggle}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "8px 12px",
              border: `1px solid ${isOpen ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: isOpen ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 14,
            }}
          >
            <span style={{ fontSize: 16 }}>🕐</span>
            <span>{displayValue || "Select time (12h)"}</span>
          </button>
        )}
      </TimePicker.Trigger>
      <TimePicker.Content>
        <TimePicker.TimePanel target="single" />
        <TimePicker.Footer>
          <TimePicker.ClearButton />
          <TimePicker.CancelButton />
          <TimePicker.ConfirmButton />
        </TimePicker.Footer>
      </TimePicker.Content>
    </TimePicker.Root>
  );
}