shadcn.io is an independent project built on shadcn/ui
Select Date Range opens a dialog with that title. Two months are shown. The range starts on the 8th through the 22nd of this month, and the second grid is the next month.
Use it when a period is one step, not the whole page. Leave both months visible if people adjust the range often. A Date Picker hides them in a field. In React, Ark UI does not name the start and end.
Installation
Anatomy
Usage
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Select Date Range</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-fit">
<DialogHeader>
<DialogTitle>Select Date Range</DialogTitle>
</DialogHeader>
<Calendar
className="rounded-md border"
defaultFocusedValue={from}
numOfMonths={2}
onValueChange={handleValueChange}
selectionMode="range"
value={value}
>
<CalendarViewControl>
<CalendarPrevTrigger />
<CalendarViewDate />
<CalendarNextTrigger />
</CalendarViewControl>
<div className="flex flex-col gap-4 md:flex-row">
<CalendarTable>
<CalendarWeekDays />
<CalendarTableDays />
</CalendarTable>
<CalendarTable>
<CalendarWeekDays />
<CalendarTableNextMonth />
</CalendarTable>
</div>
{/* The rest of the file is under Installation. */}FAQ
How do I read the start and end dates?
selectionMode="range" makes value the start and end dates, and onValueChange receives { value }. numOfMonths={2} shows two months, and the second CalendarTable uses CalendarTableNextMonth.
Which month is shown first?
defaultFocusedValue is the start date, so the first grid is the month the range starts in. The two tables sit in flex flex-col gap-4 md:flex-row.
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.
API Reference
Dialog
Sets asChild. The rest is on the Dialog page.
Button
Sets variant="outline". The rest is on the Button page.
Calendar
Sets defaultFocusedValue={from}, numOfMonths={2}, onValueChange={handleValueChange}, selectionMode="range" and value={value}. The rest is on the Calendar page.
