Common Types

Shared type aliases used across the headless package.

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

DatePickerSize

UI size variant. Headless hooks pass this through without using it. Styled components use it for visual sizing.

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

WeekDay

Day of the week as a string. Used in the weekStartsOn option.

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

CaptionLayout

Calendar header layout mode.

type CaptionLayout = "buttons" | "dropdown";

Value	Description
`"buttons"`	Previous/next month navigation buttons (default).
`"dropdown"`	Year and month select dropdowns.

TimePrecision

Controls which time columns are shown.

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

Value	Columns Shown
`"hour"`	Hour only.
`"minute"`	Hour + minute.
`"second"`	Hour + minute + second.

HourFormat

12-hour or 24-hour time display.

type HourFormat = "12" | "24";

TimePeriod

AM/PM indicator for 12-hour format.

type TimePeriod = "AM" | "PM";

MinuteStep

Valid minute increment values for step-based minute selection.

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

SecondStep

Valid second increment values for step-based second selection.

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

CalendarMonth

Generated calendar data for a single month.

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

Field	Type	Description
`month`	`Date`	The month this calendar represents.
`days`	`(Date \| null)[]`	Flat array of 42 cells (6 weeks x 7 days). `null` for empty cells.
`weeks`	`(Date \| null)[][]`	2D array of 6 weeks, each containing 7 day cells.

DateUnit

Unit of time for date utility functions (startOf, endOf, add, subtract, isSame, isBefore, isAfter, diff).

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