بازهی تاریخ شمسی
date-range-pickerکامپوننتبازهی تاریخ شمسی با دو ماه کنار هم، پیشنمایش بازه با هاور، بازههای آماده مثل «۷ روز گذشته» و شمارش روزها.
شهریور ۱۴۰۵
مهر ۱۴۰۵
۱۴ روز
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add date-range-pickerنصب دستی
محتوای تب «کد» را در
components/ui/date-range-picker.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { DateRangePicker, RangeCalendar, formatJalaliRange } from "@/components/ui/date-range-picker"23<DateRangePicker onChange={(r) => r.from && r.to && load(r)} min={new Date()} />45// تقویم بدون فیلد:6<RangeCalendar months={2} defaultValue={{ from, to }} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| value / defaultValue | { from: Date | null; to: Date | null } | - | دو سر بازه با Date معمولی. اگر پایان قبل از شروع انتخاب بشه، جابهجا میشن. |
| months | 1 | 2 | ۲ در فیلد، ۱ در تقویم | تعداد ماههای کنار هم. زیر ۶۴۰ پیکسل زیر هم میرن. |
| presets | RangePreset[] | defaultRangePresets | چیپهای بالای تقویم. برای حذف [] بدید. |
| min / max | Date | - | روزهای خارج از بازه غیرفعال میشن. |
نکتههای راستچین
- نوار بین دو سر بازه با rounded-s و rounded-e گرد میشه، نه left و right، چون هفته از راست به چپ میره.
- نمایش متنی بازه کوتاه میشه، مثل «۱۲ تا ۲۵ مهر ۱۴۰۵»، و فقط وقتی سال فرق کنه سال هر دو سر میآد.