Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar examples · Dialog

Calendar with Range in Dialog for React

A button that opens a dialog with a two-month calendar for selecting a date range.

Framework
UI library

The range calendar inside a Dialog: a Select Date Range button opens it, and the dialog grows to fit both months. Use it for a period chosen in one step, such as a report filter.

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

How do I read the start and end dates?

mode="range" makes selected an object with from and to, and onSelect updates it. numberOfMonths={2} shows two months. This demo starts at the 8th through the 22nd of the current month.

Which month is shown first?

defaultMonth is selected.from, so the first grid is the month the range starts in.

How is the dialog opened?

DialogTrigger is a button reading Select Date Range. It opens DialogContent with sm:max-w-fit, and DialogTitle reads Select Date Range.

What range is selected at first?

The 8th through the 22nd of the current month. The dialog opens with that range already set, and the second grid shows the following month.

How are the 8th and the 22nd built?

from and to are new Date(year, month, 8) and new Date(year, month, 22).

How wide is the dialog?

The dialog uses sm:max-w-fit, so the two months set its width. The calendar inside has rounded-md border.

All 16 calendar examples