Groudit UI

Date Range Picker

Betav1.0.0

Calendar(react-day-picker) range 모드를 (SAP UI5 DateRangeSelection 패턴 참고) Popover 안에 넣어 시작/종료 두 날짜를 한 번에 선택. FilterBar / 보고서 기간 / 예약에 사용.

Loading…
import { DateRangePicker } from "@/components/ui/date-range-picker";
import type { DateRange } from "react-day-picker";

const [range, setRange] = useState<DateRange | undefined>();

<DateRangePicker
  value={range}
  onChange={setRange}
  placeholder="Pick a date range"
  numberOfMonths={2}
  disableFuture       // 미래 차단 (보고서 기간)
  // disablePast      // 과거 차단 (예약)
/>

// 결과
// range.from → Date | undefined
// range.to   → Date | undefined

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/date-range-picker.json

Composition

DateRangePicker
├── Popover
├── PopoverTrigger (input-like button)
│   ├── Calendar icon
│   ├── Range text
│   └── Chevron
└── PopoverContent
    ├── Calendar (mode=range)
    └── Clear / Apply 액션