Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Date Picker examples · Standard

Date Picker with Range for React

A date range picker that shows two months side by side.

Framework
UI library

A Date Picker in range mode with this month and the next side by side. Click a start and an end; the days between are shaded, and the button reads the range, such as Oct 06, 2026 - Oct 22, 2026. Use it for bookings, reports and filters that cover a period.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Which props make it a range picker?

selectionMode="range" and numOfMonths={2} on DatePicker. The content renders the visible month and the next one in two tables, under one header with the previous and next arrows.

Where are the start and end stored?

In the value, a list of two dates: start, then end. It starts on the 6th and 22nd of the current month, and the calendar opens there.

How does the button format the range?

Each date with Intl.DateTimeFormat as a short month, two-digit day and year, joined with a hyphen. With only a start it prints that date, and with nothing, Pick a date range.

Does picking the end date close the picker?

Yes, a complete range closes it. Set closeOnSelect to false to keep it open, for example when you add presets beside the months.

How do I show one month?

Set numOfMonths to 1 and drop the second table. The selection still works across months with the arrows.

Can I limit the length of the range?

Use isDateUnavailable to block days too far from the start, or check the length in the value change handler and keep the old value when it's too long.

All 8 date picker examples