useDateTimePicker

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

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

function MyDateTimePicker() {
  const [dateTime, setDateTime] = useState<Date | null>(null);

  const picker = useDateTimePicker({
    value: dateTime,
    onChange: setDateTime,
    time: { precision: "minute", hourFormat: "24", minuteStep: 5 },
  });

  return (
    <div ref={picker.containerRef}>
      <button onClick={picker.handleToggle}>
        {picker.displayValue || picker.locale.dateTimePlaceholder}
      </button>
      {picker.isOpen && (
        <div ref={picker.popupRef} onKeyDown={picker.handleKeyDown}>
          {/* Calendar (same as useDatePicker) */}
          <div>
            <button onClick={picker.handlePrevMonth}>{picker.locale.prevMonth}</button>
            <span>{picker.locale.formatMonthYear(picker.calendar.month)}</span>
            <button onClick={picker.handleNextMonth}>{picker.locale.nextMonth}</button>
          </div>
          {/* ...calendar grid... */}

          {/* Time display */}
          <div>
            <span>Time: {picker.timeDisplayValue}</span>
          </div>

          {/* Time controls */}
          <div>
            <input
              type="number"
              value={picker.tempHour}
              onChange={(e) => picker.handleHourChange(Number(e.target.value))}
            />
            <span>:</span>
            <input
              type="number"
              value={picker.tempMinute}
              onChange={(e) => picker.handleMinuteChange(Number(e.target.value))}
            />
          </div>

          <button onClick={picker.handleConfirm}>{picker.locale.confirm}</button>
        </div>
      )}
    </div>
  );
}