Range Date Picker

An interactive Range Date Picker component featuring single month, dual-month, and rate-priced calendar layouts for hotel or flight booking applications.

Variations

Single Month Range Date Picker

Compact single month view for date range selection.

Active Color

Single Month Priced Range Date Picker

Single calendar layout displaying dynamic rate prices ($100, $120) below date numbers.

Dual Month Range Date Picker

Side-by-side dual calendars (Left Month & Right Month) for continuous range selection.

Dual Month Priced Range Date Picker

Side-by-side dual calendars displaying dynamic rate prices ($100, $120) below date numbers.

Disable past dates

SetdisablePast: to grey out every day before today so it can neither start nor end a range. minDate and maxDate bound the calendar to any window.

The card opens as a bare calendar. Pick a start day and a time rail unfolds beside it — Start first, then an End column once the end day is chosen. The rail unfolds under the calendar when the card is narrow, and Clear folds it away.

SetshowTime: to add the Start / End time columns. With no value the card starts empty; both from and to then carry a time and the footer shows it. timeFormat switches to 24-hour and minuteStep sets the granularity.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Range Date Picker

npx shadcn@latest add @algorize-ui/range-date-picker

components/custom/range-date-picker.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Range Date Picker to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

time-picker is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/time-picker

Features

Discover the interactive capabilities of the RangeDatePicker component:

Single & Dual Priced Calendars (variant="priced-single" | "priced-dual"): Renders dynamic rate prices ($100, $120) directly below each date number for hotel room or flight booking workflows in both single and dual month views.
Dual Calendar Layout (variant="dual"): Displays two side-by-side calendars (Month N on Left, Month N+1 on Right). Select start date from the left calendar and end date on the right calendar.
Single Calendar Layout (variant="single"): Compact single-month view ideal for smaller screens or compact forms.
Custom Price Formatter (getPrice): Accepts custom callback functions to supply date-specific rates from API or static pricing rules.
Range Selection Engine: Click any start date and end date to highlight the span with smooth background effects.
Dynamic Color Themes: Built-in support for "primary", "indigo", "rose", "emerald", and "zinc" color schemes.

Props Reference: RangeDatePicker

Prop	Type	Default	Description
`variant`	`"single" \| "dual" \| "priced-single" \| "priced-dual"`	`"single"`	Calendar layout variant. `"priced-single"` & `"priced-dual"` render price tags below date numbers.
`showPrices`	`boolean`	`false`	Toggles visibility of price labels underneath dates.
`getPrice`	`(date: Date) => string \| number \| null`	`undefined`	Custom pricing formatter function to return dynamic rates per date.
`value`	`{ from: Date \| null; to: Date \| null }`	`undefined`	Controlled date range value object.
`onChange`	`(range: DateRange) => void`	`undefined`	Callback fired when date range is selected or reset.
`defaultFrom`	`Date \| null`	`Last 7 Days`	Initial start date for uncontrolled state.
`defaultTo`	`Date \| null`	`Today`	Initial end date for uncontrolled state.
`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc"`	`"primary"`	Theme color variant for highlights and buttons.
`disablePast`	`boolean`	`false`	Greys out every day before today so it cannot start or end a range. With `showTime`, times already passed today are disabled too.
`minDate`	`Date`	`undefined`	Earliest selectable day (inclusive). Combined with `disablePast`, the later bound wins.
`maxDate`	`Date`	`undefined`	Latest selectable day (inclusive).
`showTime`	`boolean`	`false`	Adds Start / End time columns. The card opens with the calendar alone and starts empty when uncontrolled; picking a start day unfolds the columns to the right of a single-month calendar when there is room for the wider card, under it otherwise (dual-month always stacks). Clear folds them away. Both `from` and `to` carry a time; on a same-day range the end can never precede the start.
`timeFormat`	`"12h" \| "24h"`	`"12h"`	12-hour clock with an AM / PM column, or a 24-hour one.
`minuteStep`	`number`	`5`	Minute granularity of the time columns.