공통 타입

headless 패키지 전반에서 사용되는 공유 타입 별칭입니다.

import type {
  DatePickerSize,
  WeekDay,
  CaptionLayout,
  TimePrecision,
  HourFormat,
  TimePeriod,
  MinuteStep,
  SecondStep,
  CalendarMonth,
  DateUnit,
} from "react-date-range-picker-headless";

DatePickerSize

UI 크기 변형입니다. Headless 훅은 이를 사용하지 않고 그대로 전달합니다. Styled 컴포넌트는 시각적 크기 조정에 이를 사용합니다.

type DatePickerSize = "x-large" | "large" | "medium" | "small";

WeekDay

문자열 형태의 요일입니다. weekStartsOn 옵션에서 사용됩니다.

type WeekDay = "sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday";

CaptionLayout

캘린더 헤더 레이아웃 모드입니다.

type CaptionLayout = "buttons" | "dropdown";

값	설명
`"buttons"`	이전/다음 달 탐색 버튼입니다 (기본값).
`"dropdown"`	연도 및 월 선택 드롭다운입니다.

TimePrecision

표시할 시간 열을 제어합니다.

type TimePrecision = "hour" | "minute" | "second";

값	표시되는 열
`"hour"`	시간만 표시.
`"minute"`	시간 + 분 표시.
`"second"`	시간 + 분 + 초 표시.

HourFormat

12시간 또는 24시간 시간 표시입니다.

type HourFormat = "12" | "24";

TimePeriod

12시간 형식을 위한 오전/오후(AM/PM) 표시기입니다.

type TimePeriod = "AM" | "PM";

MinuteStep

단계 기반 분 선택에 유효한 분 증가 값입니다.

type MinuteStep = 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;

SecondStep

단계 기반 초 선택에 유효한 초 증가 값입니다.

type SecondStep = 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;

CalendarMonth

단일 월에 대해 생성된 캘린더 데이터입니다.

interface CalendarMonth {
  month: Date;
  days: (Date | null)[];
  weeks: (Date | null)[][];
}

필드	타입	설명
`month`	`Date`	이 캘린더가 나타내는 월입니다.
`days`	`(Date \| null)[]`	42개 셀(6주 x 7일)의 1차원 배열입니다. 빈 셀은 `null`입니다.
`weeks`	`(Date \| null)[][]`	각각 7일의 셀을 포함하는 6주의 2차원 배열입니다.

DateUnit

날짜 유틸리티 함수(startOf, endOf, add, subtract, isSame, isBefore, isAfter, diff)를 위한 시간 단위입니다.

type DateUnit = "year" | "month" | "week" | "day" | "hour" | "minute" | "second" | "millisecond";