DateRangePicker
Date range selection with two-phase picking (from, then to)
Preview
Pick a date range
Usage
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { useState } from "react"
function DateRangePickerDemo() {
const [from, setFrom] = useState<string | undefined>()
const [to, setTo] = useState<string | undefined>()
return (
<DateRangePicker
from={from}
to={to}
onChange={(newFrom, newTo) => {
setFrom(newFrom)
setTo(newTo)
}}
placeholder="Pick a date range"
/>
)
}Uses a two-phase selection: first pick the start date, then pick the end date. The trigger shows clickable "from" and "to" zones so users can edit either end directly. Includes hover preview for the range, month/year dropdowns, and a "Today" shortcut.
Install
npx shadcn add @bonsai/date-range-picker