Date Picker
دکمهای که تاریخ انتخابشده را نشان میدهد و با کلیک، Calendar را داخل Popover باز میکند؛ همان ترکیب Button و Popover و Calendar که در مستندات Calendar هم توضیح داده شده، اینجا بهعنوان یک کامپوننت آماده.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/date-picker.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/date-picker.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/date-picker.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/date-picker.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { DatePicker } from "@/components/ui/date-picker"
<DatePicker value={date} onChange={setDate} calendar="jalali" aria-label="تاریخ سفر" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
مقدار یک Date میلادیِ خام است (نه y/m/d شمسی)، دقیقاً همان چیزی که خودِ Calendar میگیرد؛ پراپ calendar فقط فرمت متنِ دکمه و اعداد گرید را عوض میکند.
با انتخاب یک روز، Popover خودکار بسته میشود.
برای فیلد قابلتایپ (بدون تقویم شناور) بهجای این از DateField استفاده کنید.
دسترسپذیری
- دکمهٔ باز کننده یک Button معمولی است؛ با Space/Enter باز میشود و Popover خودش فوکوس و Escape را مدیریت میکند.
- وقتی مقداری انتخاب نشده، متن دکمه با رنگ کمرنگتر (text-muted-foreground) نشان داده میشود تا از مقدار واقعی متمایز باشد.
مرجع API
DatePicker
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| value / defaultValue | Date | — | مقدار کنترلشده یا اولیه. |
| onChange | (date: Date | undefined) => void | — | فراخوانی هنگام انتخاب یک روز. |
| calendar | "jalali" | "gregorian" | "jalali" | تقویمِ نمایش (متن دکمه و گرید Calendar). |
| placeholder | string | "انتخاب تاریخ" | متن دکمه وقتی هنوز چیزی انتخاب نشده. |
| disabled | boolean | false | غیرفعال کردن دکمه. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
میلادی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
با برچسب
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
بدون مقدار اولیه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
غیرفعال
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
غیرفعال (Disabled)
DatePicker فقط disabled بولی میگیرد، نه ماتریسِ روزبهروزِ Calendar. برای بستنِ روزهای خاص (گذشته، تعطیل) بهجای DatePicker از Popover با Calendar و disabled ماتریسی استفاده کنید.
برای بستنِ تکتکِ روزها، از Calendar با disabled ماتریسی استفاده کنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
در حال دریافت (Loading)
تا رسیدن قاعدهٔ روزهای مجاز، انتخابگر را قفل کنید؛ وگرنه کاربر روزی را انتخاب میکند که بعداً معلوم میشود بسته بوده.
در حال دریافت روزهای آزاد…
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| میلادی | فرمهای بینالمللی یا APIهایی که تاریخ میلادی میخواهند |
| با برچسب | فیلد تاریخ داخل یک فرم که باید مشخص باشد این تاریخ برای چیست |
| بدون مقدار اولیه | فیلدی که کاربر باید خودش تاریخ را از صفر انتخاب کند |
| غیرفعال | تاریخی که تا برآوردهشدن یک شرط قبلیِ فرم قابل تغییر نیست |
| غیرفعال (Disabled) | فیلد تاریخی که فعلاً در دسترس نیست |
| در حال دریافت (Loading) | انتخابگری که روزهای آزادش از سرور میآید |