Components
Loading preview...
A DateRangePicker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date range A date range picker can be built using two separate <input type="date"> elements, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. DateRangePicker helps achieve accessible and international date and time range pickers that can be styled as needed.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/date-range-pickerimport { CalendarIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
CalendarCell,
CalendarGrid,
CalendarGridBody,
CalendarGridHeader,
CalendarHeaderCell,
CalendarHeading,
RangeCalendar,
} from "@/components/ui/calendar"
import {
DatePickerContent,
DateRangePicker,
} from "@/components/ui/date-range-picker"
import { DateInput } from "@/components/ui/datefield"
import { FieldGroup, Label } from "@/components/ui/field"
export function DateRangePickerDemo() {
return (
<DateRangePicker className="min-w-[320px] space-y-1">
<Label>Date range</Label>
<FieldGroup>
<DateInput variant="ghost" slot={"start"} />
<span aria-hidden className="px-2 text-sm text-muted-foreground">
-
</span>
<DateInput className="flex-1" variant="ghost" slot={"end"} />
<Button
variant="ghost"
size="icon"
className="mr-1 size-6 data-[focus-visible]:ring-offset-0"
>
<CalendarIcon aria-hidden className="size-4" />
</Button>
</FieldGroup>
<DatePickerContent>
<RangeCalendar>
<CalendarHeading />
<CalendarGrid>
<CalendarGridHeader>
{(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
</CalendarGridHeader>
<CalendarGridBody>
{(date) => <CalendarCell date={date} />}
</CalendarGridBody>
</CalendarGrid>
</RangeCalendar>
</DatePickerContent>
</DateRangePicker>
)
}