Date Range Pickerv1.0.0
دکمه‌ای که بازهٔ انتخاب‌شده (شروع تا پایان) را نشان می‌دهد و با کلیک، Calendar را در حالت range و دو ماه کنار هم داخل Popover باز می‌کند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/date-range-picker.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/date-range-picker.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/date-range-picker.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/date-range-picker.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { DateRangePicker } from "@/components/ui/date-range-picker"
<DateRangePicker value={range} onChange={setRange} calendar="jalali" aria-label="بازهٔ اقامت" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
مقدار همان DateRange خودِ react-day-picker است: شیئی با فیلدهای اختیاری from و to (هر دو Date).
تا وقتی هر دو سرِ بازه انتخاب نشده، Popover باز می‌ماند؛ با انتخاب روزِ پایانی خودکار بسته می‌شود.
داخلش دقیقاً همان RangeCalendar مستقل است؛ برای فقط-تقویم بدون دکمه/Popover (مثل فیلترِ گزارش روی صفحه)، مستقیم از RangeCalendar استفاده کنید.
دسترس‌پذیری
- دکمهٔ باز کننده یک Button معمولی با aria-expanded خودکار از Popover است.
- وقتی بازه‌ای انتخاب نشده، متن دکمه با رنگ کم‌رنگ‌تر نشان داده می‌شود.
مرجع API
DateRangePicker
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value / defaultValue | { from?: Date; to?: Date } | — | بازهٔ کنترل‌شده یا اولیه. |
| onChange | (range) => void | — | فراخوانی هنگام تغییر هر سرِ بازه. |
| calendar | "jalali" | "gregorian" | "jalali" | تقویمِ نمایش. |
| numberOfMonths | number | 2 | تعداد ماه‌های کنار هم در Popover. |
| placeholder | string | "انتخاب بازه" | متن دکمه وقتی هنوز چیزی انتخاب نشده. |
| disabled | boolean | false | غیرفعال کردن دکمه. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونهها
میلادی، یک ماه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
بدون مقدار اولیه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
غیرفعال
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
در حال دریافت (Loading)
تا رسیدن قاعدهٔ بازههای مجاز، انتخابگر را قفل کنید تا کاربر بازه‌ای انتخاب نکند که بعداً رد شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| میلادی، یک ماه | فیلتر بازهٔ تاریخ در گزارشهای بینالمللی روی صفحههای باریک |
| بدون مقدار اولیه | فرم رزرو تازه که کاربر هنوز بازه‌ای انتخاب نکرده |
| غیرفعال | بازهٔ رزروی که پس از تأیید نهایی دیگر قابل ویرایش نیست |
| در حال دریافت (Loading) | بازه‌ای که محدودیتهایش از سرور میآید |