Skip to main content

useRangePicker

Hook behind <RangePicker>. Same shape as useDatePicker, with range state.

import { useRangePicker } from '@kalyx/react';

Signature​

function useRangePicker(options?: UseRangePickerOptions): UseRangePickerReturn;

Options​

FieldTypeDefaultDescription
valueDateRange—Controlled range.
defaultValueDateRange—Uncontrolled initial range.
onChange(range: DateRange) => void—Fires on selection.
disabledDisabledRule[][]Disable rules.
weekStartsOn0 | 10Week start.
adapterDateAdapterDateFnsAdapterCustom adapter.
displayTimezonestring—IANA zone. Same semantics as useDatePicker#displayTimezone; applies to both start and end.

Return (delta over useDatePicker)​

FieldTypeDescription
valueDateRange{ start, end }.
selectingTarget'start' | 'end'Which end the next click will set.
selectDate(iso: ISODateString) => voidAdvances the range selection.
setRange(range: DateRange) => voidReplace both ends at once (used by presets).
hoverDateISODateString | nullFor hover-preview highlighting.
setHoverDate(iso: ISODateString | null) => voidSetter.

All other fields (isOpen, open, close, viewMonth, setViewMonth, calendar, focusedDate, setFocusedDate, previousMonth, nextMonth, pickerId, adapter) behave identically.

The calendar's CalendarDay values now carry meaningful isRangeStart, isRangeEnd, and isInRange flags.

Example — hoverable range grid​

import { useRangePicker } from '@kalyx/react';

export function MiniRange() {
  const {
    calendar,
    selectDate,
    setHoverDate,
    setRange,
  } = useRangePicker({ defaultValue: { start: null, end: null } });

  return (
    <>
      <button
        onClick={() =>
          setRange({
            start: '2026-04-01T00:00:00.000Z',
            end: '2026-04-30T00:00:00.000Z',
          })
        }>
        April
      </button>
      <div className="grid grid-cols-7">
        {calendar.flat().map((day) => (
          <button
            key={day.isoString}
            onMouseEnter={() => setHoverDate(day.isoString)}
            onMouseLeave={() => setHoverDate(null)}
            onClick={() => selectDate(day.isoString)}
            aria-pressed={day.isRangeStart || day.isRangeEnd}
            className={[
              day.isInRange ? 'bg-indigo-100' : '',
              (day.isRangeStart || day.isRangeEnd) ? 'bg-indigo-600 text-white' : '',
            ].join(' ')}>
            {day.dayNumber}
          </button>
        ))}
      </div>
    </>
  );
}