Date Pickerv1.0.0
دکمه‌ای که تاریخ انتخاب‌شده را نشان می‌دهد و با کلیک، Calendar را داخل Popover باز می‌کند؛ همان ترکیب Button و Popover و Calendar که در مستندات Calendar هم توضیح داده شده، اینجا به‌عنوان یک کامپوننت آماده.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/date-picker.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/date-picker.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/date-picker.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/date-picker.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { DatePicker } from "@/components/ui/date-picker"
<DatePicker value={date} onChange={setDate} calendar="jalali" aria-label="تاریخ سفر" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
مقدار یک Date میلادیِ خام است (نه y/m/d شمسی)، دقیقاً همان چیزی که خودِ Calendar می‌گیرد؛ پراپ calendar فقط فرمت متنِ دکمه و اعداد گرید را عوض می‌کند.
با انتخاب یک روز، Popover خودکار بسته می‌شود.
برای فیلد قابل‌تایپ (بدون تقویم شناور) به‌جای این از DateField استفاده کنید.
دسترس‌پذیری
- دکمهٔ باز کننده یک Button معمولی است؛ با Space/Enter باز می‌شود و Popover خودش فوکوس و Escape را مدیریت می‌کند.
- با label، نامِ دسترس‌پذیرِ دکمه برچسب به‌علاوهٔ تاریخِ فعلی است (aria-labelledby به برچسب و خودِ دکمه)، تا صفحه‌خوان هم «تاریخ سفر» و هم مقدار را بخواند. بدون برچسبِ قابل‌دیدن، aria-label بدهید.
- وقتی مقداری انتخاب نشده، متن دکمه با رنگ کم‌رنگ‌تر (text-muted-foreground) نشان داده می‌شود تا از مقدار واقعی متمایز باشد.
مرجع API
DatePicker
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value / defaultValue | Date | — | مقدار کنترل‌شده یا اولیه. |
| onChange | (date: Date | undefined) => void | — | فراخوانی هنگام انتخاب یک روز. |
| calendar | "jalali" | "gregorian" | "jalali" | تقویمِ نمایش (متن دکمه و گرید Calendar). |
| minDate | Date | — | کم‌ترین تاریخِ قابل‌انتخاب؛ روزهای قبلش غیرفعال‌اند. |
| maxDate | Date | — | بیش‌ترین تاریخِ قابل‌انتخاب؛ برای تاریخ تولد new Date() یا ۱۸ سال پیش. با minDate یا maxDate سربرگِ تقویم منوی ماه و سال می‌گیرد و تقویم روی ماهِ تاریخِ انتخاب‌شده باز می‌شود. |
| placeholder | string | "انتخاب تاریخ" | متن دکمه وقتی هنوز چیزی انتخاب نشده. |
| disabled | boolean | false | غیرفعال کردن دکمه. |
| id | string | React.useId() | id دکمهٔ تریگر؛ برای اتصالِ یک <Label htmlFor> بیرونی. |
| label | React.ReactNode | — | برچسبِ قابل‌دیدن بالای دکمه، هم‌شکلِ TextField و متصل با aria-labelledby. |
| description | React.ReactNode | — | متنِ راهنمای زیرِ دکمه، متصل با aria-describedby. |
| invalid / errorMessage | boolean / React.ReactNode | false | حالتِ خطا؛ aria-invalid روی دکمه و پیامِ خطا به‌جای description. |
| required / optional | boolean | false | ستارهٔ اجباری یا «(اختیاری)» کنارِ label. |
| aria-label | string | — | نامِ دسترس‌پذیر وقتی برچسبِ قابل‌دیدن ندارید. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
میلادی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
با برچسب و توضیح
label و description همان ظاهرِ TextField را دارند و خودکار با aria-labelledby/aria-describedby به دکمه وصل می‌شوند؛ نامِ دسترس‌پذیرِ دکمه «برچسب + تاریخِ انتخاب‌شده» است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
با Label جدا (htmlFor)
id به دکمهٔ تریگر می‌رسد، پس یک Label بیرونی با htmlFor به آن وصل می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نامعتبر (Invalid)
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
بدون مقدار اولیه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
غیرفعال
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
غیرفعال (Disabled)
DatePicker فقط disabled بولی می‌گیرد، نه ماتریسِ روز‌به‌روزِ Calendar. برای بستنِ روزهای خاص (گذشته، تعطیل) به‌جای DatePicker از Popover با Calendar و disabled ماتریسی استفاده کنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
در حال دریافت (Loading)
تا رسیدن قاعدهٔ روزهای مجاز، انتخابگر را قفل کنید؛ وگرنه کاربر روزی را انتخاب می‌کند که بعداً معلوم می‌شود بسته بوده.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| میلادی | فرم‌های بین‌المللی یا APIهایی که تاریخ میلادی می‌خواهند |
| با برچسب و توضیح | فیلد تاریخ داخل یک فرم که باید مشخص باشد این تاریخ برای چیست |
| با Label جدا (htmlFor) | چیدمانی که برچسب جایی جدا از خودِ فیلد می‌نشیند |
| نامعتبر (Invalid) | فیلد اجباری که کاربر بدون انتخاب، فرم را ثبت کرده |
| بدون مقدار اولیه | فیلدی که کاربر باید خودش تاریخ را از صفر انتخاب کند |
| غیرفعال | تاریخی که تا برآورده‌شدن یک شرط قبلیِ فرم قابل تغییر نیست |
| غیرفعال (Disabled) | فیلد تاریخی که فعلاً در دسترس نیست |
| در حال دریافت (Loading) | انتخابگری که روزهای آزادش از سرور می‌آید |