본문으로 건너뛰기

useDatePicker

<DatePicker> 뒤에 있는 훅. 조합 컴포넌트로 표현되지 않는 완전 커스텀 UI가 필요할 때 사용합니다.

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

시그니처​

function useDatePicker(options?: UseDatePickerOptions): UseDatePickerReturn;

옵션​

필드타입기본값설명
valueISODateString | null—제어 값.
defaultValueISODateString—비제어 초기값.
onChange(value: ISODateString | null) => void—변경 콜백.
disabledDisabledRule[][]비활성 규칙.
weekStartsOn0 | 10주 시작.
adapterDateAdapterDateFnsAdapter커스텀 어댑터.

반환값​

필드타입설명
valueISODateString | null현재 값.
isOpenbooleanpopover 상태.
open() => voidpopover 열기.
close() => voidpopover 닫기.
toggle() => voidpopover 토글.
selectDate(iso: ISODateString | null) => void프로그래매틱 값 지정.
viewMonthISODateString보이는 월의 1일 (UTC).
setViewMonth(iso: ISODateString) => void월 점프.
calendarCalendarGrid6×7 CalendarDay 그리드.
focusedDateISODateString키보드 포커스 위치.
setFocusedDate(iso: ISODateString) => void포커스 이동.
previousMonth() => voidsetViewMonth(prev) 단축.
nextMonth() => voidsetViewMonth(next) 단축.
pickerIdstringARIA 연결용 useId 기반 ID.
adapterDateAdapter해결된 어댑터.

CalendarDay​

type CalendarDay = {
  isoString: ISODateString;
  dayNumber: number;           // 1–31
  isCurrentMonth: boolean;
  isToday: boolean;
  isSelected: boolean;
  isDisabled: boolean;
  isFocused: boolean;
  isRangeStart: boolean;       // useDatePicker에선 항상 false
  isRangeEnd: boolean;         // useDatePicker에선 항상 false
  isInRange: boolean;          // useDatePicker에선 항상 false
};

예시 — 커스텀 그리드​

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

export function MiniCalendar() {
  const {
    value,
    calendar,
    viewMonth,
    previousMonth,
    nextMonth,
    selectDate,
  } = useDatePicker({
    defaultValue: new Date().toISOString(),
    onChange: (v) => console.log(v),
  });

  return (
    <div>
      <header>
        <button onClick={previousMonth} aria-label="이전">◀</button>
        <span>{viewMonth.slice(0, 7)}</span>
        <button onClick={nextMonth} aria-label="다음">▶</button>
      </header>
      <div className="grid grid-cols-7">
        {calendar.flat().map((day) => (
          <button
            key={day.isoString}
            aria-selected={day.isSelected}
            disabled={day.isDisabled}
            onClick={() => selectDate(day.isoString)}
            className={[
              day.isCurrentMonth ? '' : 'opacity-40',
              day.isToday ? 'ring-1 ring-indigo-500' : '',
              day.isSelected ? 'bg-indigo-600 text-white' : '',
            ].join(' ')}>
            {day.dayNumber}
          </button>
        ))}
      </div>
    </div>
  );
}

훅 vs 컴포넌트​

필요선택
표준 캘린더, 가벼운 스타일링<DatePicker.Calendar classNames={…}>
표준 캘린더, 커스텀 DOM 슬롯<DatePicker> + 커스텀 className
비그리드 레이아웃 (주 뷰, 어젠다, 인라인 리스트)useDatePicker
디자인 시스템 프리미티브 내부useDatePicker를 자체 컴포넌트로 래핑

관련​