API Reference

Required Props

Prop	Type	Default	Description
`start`required	`Date`	`-`	The currently selected start date.
`end`required	`Date`	`-`	The currently selected end date.
`applyCallback`required	`(start: Date, end: Date) => void`	`-`	Called when the user clicks Apply (or immediately when autoApply is true).
`children`required	`ReactNode`	`-`	The trigger element. Clicking it opens the picker. Not used in standalone mode.

Prop	Type	Default	Description
`minDate`	`Date`	`undefined`	Earliest selectable date. Cells before this are disabled.
`maxDate`	`Date`	`undefined`	Latest selectable date. Cells after this are disabled.
`years`	`[number, number]`	`[1900, currentYear]`	Constrains the year dropdown range.
`displayMinDate`	`boolean`	`false`	Show the formatted minDate in the footer.
`displayMaxDate`	`boolean`	`false`	Show the formatted maxDate in the footer.

Prop	Type	Default	Description
`ranges`	`Record<string, [Date, Date]>`	`{}`	Preset range buttons. Each key is the label; value is a [start, end] Date tuple. When empty or omitted, the ranges panel is hidden.
`autoApply`	`boolean`	`false`	Fires applyCallback immediately on every change. Hides the Apply button.
`smartMode`	`boolean`	`false`	Enables flexible date selection: ping-pong selection (clicks alternate between start and end), auto-swap when a selection would create an invalid range, same-month calendar offset (right calendar shifts forward one month), and relaxed cell constraints (all cells clickable).
`pastSearchFriendly`	`boolean`	`false`	Requires smartMode. Modifies the same-month calendar offset so the left calendar shifts back one month instead of the right shifting forward. Useful for backward-in-time searches.
`descendingYears`	`boolean`	`true`	Show years in descending order in the dropdown. Set to false for ascending.
`rangeCallback`	`(index: number, value: string) => void`	`undefined`	Called when a preset range button is clicked.

Prop	Type	Default	Description
`standalone`	`boolean`	`false`	Renders the picker inline and always visible instead of as a dropdown.
`alignment`	`'left' \| 'center' \| 'right'`	`'left'`	Controls horizontal alignment of the dropdown relative to the trigger. "left" (default) opens left-aligned, "center" centers the dropdown, "right" aligns to the right edge.
`noMobileMode`	`boolean`	`false`	Always renders side-by-side regardless of screen width.
`forceMobileMode`	`boolean`	`false`	Always uses stacked/mobile layout.

Prop	Type	Default	Description
`twelveHoursClock`	`boolean`	`false`	Shows 12-hour time picker with AM/PM instead of 24-hour.

Prop	Type	Default	Description
`theme`	`Theme`	`'sky'`	Color theme. 22 options based on Tailwind color names.
`classNames`	`ClassNames`	`undefined`	Object for injecting custom CSS classes into specific UI zones.
`locale`	`Locale`	`undefined`	Localization object for customizing all text labels, date format, and first day of week.