Date range pickerforms
Two-endpoint date range field with presets, day-count limits, anchor-aware unavailable dates and one or two month calendars; values are YYYY-MM-DD strings.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/date-range-pickerDefault
date-range-picker-demo.tsx
"use client";
import * as React from "react";import { DateRangePicker, rangePresets, type DateRangeValue } from "@/components/ui/date-range-picker";
export default function DateRangePickerDemo() { const [value, setValue] = React.useState<DateRangeValue | null>(null); return ( <div className="flex flex-col gap-2"> <DateRangePicker aria-label="Report period" name="period" presets={rangePresets} value={value} onValueChange={setValue} /> <p className="text-sm text-muted-foreground">{value ? `${value.from} to ${value.to}` : "No range selected"}</p> </div> );}