shadcn.io is not affiliated with official shadcn/ui
Date Range Picker Calendar Block for React
A range popover under a report's date field, shown open: presets for the last 7, 30 and 90 days, two months to click a first and last day in, a snap to whole days, weeks or months, and a count of working and weekend days.
Installation
Overview
Let people choose the span a report covers, with this date range picker for React with Base UI. It hangs from the range field on the sessions report of Rangewick, an analytics tool: the field shows "9 Sep to 8 Oct 2026", and the report behind it is drawn as one bar per day with the range's first, middle and last day on its axis. The popover holds three presets counted back from the fixed 14 October 2026, a month grid built by hand (two months from a wide screen, one on a phone) where a first click sets the start and a second sets the end, a Toggle Group that snaps the range to whole days, weeks (Monday to Sunday) or months, and a summary that counts days, working days and weekend days, with a Switch that drops weekends from the count and from the bars. Apply, the only Shine Button, writes the range to the field and the report; Cancel keeps the old one. For preview the popover is drawn open in place when the page loads; the range field opens the real non-modal Popover, with the same panel and the same state. For analytics, reports, bookings and any app that filters by dates.
FAQ
Why is the popover already open, and what do I keep?
So you can see it without a click. On load the popover is a copy drawn in place at the top of the report: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. The range field opens the real Popover, which is not modal either, with Escape and focus returning to the field, and the copy stays closed until a reload. Both show the same RangePanel component and share the block's state. In your app keep the Popover and drop the copy: the "in-place" state and the dialog element inside the frame.
How do I choose a range, and how do the keys work?
Click a first day, then a last day; a later click on an earlier day swaps them, and a third click starts again. The month is one tab stop: the arrow keys move a day or a week, Home and End go to the start and end of the week, Page Up and Page Down turn the month, and Enter or Space picks the day. Each day is a button named with its full date and whether it starts, ends or sits inside the range, and the grid keeps its left-to-right order in right-to-left languages.
What does Snap do?
Days leaves the range as picked. Weeks moves the start back to the Monday and the end forward to the Sunday of their weeks, and Months moves them to the first and last day of their months. It applies when a range is completed and when you change the choice, and a preset resets it to days. Ranges are limited to 120 days in this demo.
How are working days counted?
Monday to Friday count as working days and Saturday and Sunday as weekend days; the block knows no holidays. With "Working days only" on, the summary shows only the working days and the bars for weekends are left out of the report once you apply. In your app pass your own calendar of holidays into the count.