Date Fieldv1.0.0
ورودی تاریخ با بخش‌های جداگانهٔ روز/ماه/سال، مثل TimeField؛ روی هر دو تقویم شمسی و میلادی کار می‌کند و روزهای هر ماه (و کبیسه) را خودش اعتبارسنجی می‌کند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/date-field.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/date-field.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/date-field.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/date-field.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { DateField } from "@/components/ui/date-field"
<DateField value={date} onChange={setDate} calendar="jalali" aria-label="تاریخ تولد" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
مقدار یک شیء سادهٔ با فیلدهای year، month و day در همان تقویمِ انتخاب‌شده است، نه یک Date میلادیِ تبدیل‌شده؛ چون هدف این کامپوننت فقط ویرایش بخش‌به‌بخش است، نه تبدیل تقویم.
اگر Date میلادی لازم دارید، خودتان از روی calendar تبدیل کنید (برای شمسی، Calendar در همین دیگ همین تبدیل را برای نمایش ماه انجام می‌دهد).
دسترس‌پذیری
- هر بخش role=spinbutton با aria-valuemin/max/now/text جداگانه دارد.
- فلش راست/چپ بین بخش‌ها جابه‌جا می‌شود، فلش بالا/پایین مقدار همان بخش را عوض می‌کند و در بخش روز به‌طور خودکار داخل تعداد روزهای همان ماه (با احتساب کبیسه در تقویم شمسی) می‌چرخد.
- تایپ رقم مستقیم مقدار می‌گذارد؛ بخش سال ۴ رقم می‌گیرد، روز/ماه ۲ رقم، و بعد از پر شدن خودکار به بخش بعدی می‌رود.
مرجع API
DateField
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value / defaultValue | { year: number; month: number; day: number } | null | — | مقدار کنترل‌شده یا اولیه (month از ۱ شروع می‌شود). |
| onChange | (value) => void | — | فراخوانی هنگام تغییر هر بخش. |
| calendar | "jalali" | "gregorian" | "jalali" | تقویمِ مرجع برای محاسبهٔ تعداد روزهای هر ماه. |
| disabled | boolean | false | غیرفعال کردن کل فیلد. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
میلادی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
با برچسب
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
بدون مقدار اولیه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
غیرفعال
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نامعتبر (Invalid)
DateField پراپ invalid ندارد؛ aria-invalid را مستقیم بدهید و پیام را با aria-describedby وصل کنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
غیرفعال در برابر مقدار قطعی‌شده
فیلدِ غیرفعال خاکستری و غیرقابل کپی است. اگر تاریخ قطعی شده و فقط باید دیده شود، به‌جای فیلد، متن بگذارید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| میلادی | فرمی بین‌المللی مثل رزرو پرواز که تاریخ را به‌صورت میلادی می‌خواهد |
| با برچسب | فیلد تاریخ تولد در فرم ثبت‌نام که باید مشخص باشد چه چیزی می‌خواهد |
| بدون مقدار اولیه | فیلد خالی در فرم جدید که کاربر باید خودش تاریخ را از صفر وارد کند |
| غیرفعال | فیلد تاریخ پایان که تا انتخاب‌نشدن تاریخ شروع قابل استفاده نیست |
| نامعتبر (Invalid) | تاریخی که با قاعدهٔ کسب‌وکار فرم نمی‌خواند |
| غیرفعال در برابر مقدار قطعی‌شده | تاریخ ثبتی که بعد از ذخیره دیگر تغییر نمی‌کند |