본문으로 건너뛰기

useDateTimePicker

<DateTimePicker> 뒤의 헤드리스 훅. 하나의 ISO 문자열이 캘린더와 시각을 모두 구동합니다. selectDate 는 시각을 보존하고 setTime 은 날짜를 보존합니다.

:::info /headless 엔트리 @kalyx/react/headless(어댑터 비의존)에서 export됩니다. 날짜 어댑터 & /headless 엔트리 참고. :::

import { useDateTimePicker } from '@kalyx/react/headless';

시그니처​

function useDateTimePicker(options?: UseDateTimePickerOptions): UseDateTimePickerReturn;

옵션​

필드타입기본값설명
valueISODateString | null-controlled datetime (날짜 + 시간, UTC).
defaultValueISODateString-uncontrolled 초기 datetime.
onChange(value: ISODateString | null) => void-datetime이 바뀔 때 호출.
disabledDisabledRule[][]비활성 규칙 (날짜에 적용).
weekStartsOn0 | 10주 시작 요일.
adapterDateAdapter-날짜 어댑터 (/headless에서 필수).
displayTimezonestring-IANA 존. currentTime 이 이 존으로 보고됨. 타임존 참고.

반환​

필드타입설명
valueISODateString | null현재 datetime.
isOpenbooleanpopover 상태.
open / close / toggle() => voidpopover 제어.
selectDate(iso: ISODateString | null) => void시각을 보존하며 날짜 설정(popover를 닫지 않음).
setTime(partial: Partial<TimeValue>) => void날짜를 보존하며 시각 변경.
currentTimeTimeValue값의 시각 부분(설정 시 displayTimezone 기준).
viewMonthISODateString표시 중인 달의 1일.
setViewMonth(iso: ISODateString) => void특정 달로 점프.
calendarCalendarGridCalendarDay 주 배열. 4~6행 × 7일이다. 훅은 fixedWeeks 를 넘기지 않으므로 행 수가 달마다 달라진다.
focusedDateISODateString키보드 포커스된 날.
setFocusedDate(iso: ISODateString) => void포커스 이동.
previousMonth / nextMonth() => void달 내비게이션 단축.
pickerIdstringARIA 연결용 안정 ID.
adapterDateAdapter해석된 어댑터.

TimeValue​

type TimeValue = {
  hours: number;   // 0~23
  minutes: number; // 0~59
  seconds: number; // 0~59
};

예제​

import { useDateTimePicker } from '@kalyx/react/headless';
import { DateFnsAdapter } from '@kalyx/adapter-date-fns';

export function MiniDateTime() {
  const { value, currentTime, calendar, selectDate, setTime } =
    useDateTimePicker({ adapter: DateFnsAdapter, displayTimezone: 'Asia/Seoul' });

  return (
    <div>
      <div className="grid grid-cols-7">
        {calendar.flat().map((day) => (
          <button key={day.isoString} onClick={() => selectDate(day.isoString)}>
            {day.dayNumber}
          </button>
        ))}
      </div>
      <input
        type="number"
        value={currentTime.hours}
        onChange={(e) => setTime({ hours: Number(e.target.value) })}
      />
      <code>{value ?? 'null'}</code>
    </div>
  );
}

관련​