useDateRangeTimePicker

Hook para la selección de un rango de fechas combinado con la selección de tiempo tanto para la fecha de inicio como para la de fin. Fusiona las capacidades de useDateRangePicker y la gestión del tiempo en un único hook.

Importación

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

Uso

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


function MyDateRangeTimePicker() {
  const [range, setRange] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });


  const picker = useDateRangeTimePicker({
    value: range,
    onChange: setRange,
    time: { precision: "minute", hourFormat: "24", minuteStep: 15 },
  });


  return (
    <div ref={picker.containerRef}>
      <button onClick={picker.handleToggle}>
        {picker.displayValue || picker.locale.rangeTimePlaceholder}
      </button>
      {picker.isOpen && (
        <div ref={picker.popupRef} onKeyDown={picker.handleKeyDown}>
          {/* Dual calendar, presets, time controls for start and end */}
        </div>
      )}
    </div>
  );
}

Opciones