DatePicker — انتخاب تاریخ
انتخاب‌گر تاریخ یک فیلد تایپی و یک تقویم باز شونده است. پیش‌فرض تقویم شمسی و ارقام فارسی است؛ با کپی کد میلادی می‌شود. برای بازهٔ تاریخ با دو مقدار، دو DatePicker بگذارید تا کرانه‌ها را خودتان کنترل کنید.
وضعیت: beta · لایه: ۳ (کپی کد) · کد: کپی کد
import { DatePicker } from '@tokapps/tuk';نمونهٔ زنده
تاریخ شروع
سالماهروز
تاریخ تولد
۱۳۷۹۱۲
Release date (میلادی)
۲۰۲۶۱۰۸
سررسیدتاریخ به‌صورت شمسی نمایش داده می‌شود
سالماهروز
تاریخ شروعتاریخ شروع الزامی است
سالماهروز
تاریخ ثبت
۱۴۰۵۷۱۶
تاریخ
سالماهروز
تاریخ
۱۴۰۵۷۱۶
کد قابل کپی
تاریخ شمسی با مقدار اولیه
import { DatePicker } from '@tokapps/tuk';import { parseDate } from '@internationalized/date';<DatePicker label="تاریخ تولد" defaultValue={parseDate('2000-03-21')} />میلادی با توضیح
<DatePicker label="Release date (میلادی)" calendar="gregorian" description="تاریخ به‌صورت شمسی نمایش داده می‌شود"/>کرانه و الزامی با خطا
import { today, getLocalTimeZone } from '@internationalized/date';<DatePicker name="startDate" label="تاریخ شروع" isRequired minValue={today(getLocalTimeZone())} isInvalid={!startDate} errorMessage="تاریخ شروع الزامی است" value={startDate} onChange={setStartDate}/>همهٔ پیکربندی‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| کپی کد | کپی کد | — | برچسب قابل‌مشاهده. |
| کپی کد | کپی کد | — | توضیح زیر فیلد. |
| کپی کد | کپی کد | — | پیام خطا؛ با کپی کد یا شکست کرانه‌ها دیده می‌شود. |
| کپی کد | کپی کد · کپی کد · کپی کد | کپی کد | اندازهٔ فیلد و سلول‌های تقویم. |
| کپی کد | کپی کد · کپی کد | کپی کد | سامانهٔ نمایش تقویم. مقدار داخلی همیشه میلادی است. |
| کپی کد | کپی کد | کپی کد | زبان، ارقام و جهت. |
| کپی کد / کپی کد | کپی کد | — | مقدار از کپی کد (مثلاً کپی کد). |
| کپی کد | کپی کد | — | با انتخاب یا پاک‌کردن. |
| کپی کد / کپی کد | کپی کد | — | کرانهٔ قابل‌انتخاب؛ روزهای خارج از بازه غیرفعال‌اند. |
| کپی کد | کپی کد | کپی کد | باید تاریخ داشته باشد. |
| کپی کد | کپی کد | کپی کد | حالت خطا. |
| کپی کد | کپی کد | کپی کد | مقدار دیده می‌شود، تقویم باز نمی‌شود. |
| کپی کد | کپی کد | کپی کد | غیرفعال. |
| کپی کد | کپی کد | کپی کد | در حال ذخیره یا بررسی؛ آیکون چرخان. |
| کپی کد | کپی کد | کپی کد | برچسب دکمهٔ باز کردن تقویم برای صفحه‌خوان. |
| کپی کد | کپی کد | — | نام فیلد در کپی کد. |
| کپی کد | رویداد صوتی · کپی کد | کپی کد | صدا هنگام انتخاب روز. |
| کپی کد | کپی کد | — | مقصد اختصاصی صدا. |
| کپی کد | کپی کد · کپی کد | کپی کد | نمایش در چاپ. |
| کپی کد | کپی کد | — | کلاس روی ریشه. |
حالت‌ها
| حالت | نمایش |
|---|---|
| خالی | placeholder و دکمهٔ تقویم |
| با مقدار | تاریخ نمایش داده می‌شود؛ روز امروز با نشانهٔ جداگانه |
| تقویم باز | شبکهٔ ماه، روز انتخاب‌شده، روزهای خارج از بازه کم‌رنگ |
| کپی کد / کپی کد / کپی کد / کپی کد | همان الگوی Input |
RTL و کیبورد
- تقویم شمسی ماه و روزها را از راست به چپ نمایش می‌دهد؛ ارقام فارسی‌اند.
- در فیلد، می‌توانید تاریخ را تایپ کنید؛ کپی کد/کپی کد روز یا هفته را جابه‌جا می‌کنند؛ کپی کد یا کپی کد تقویم را باز می‌کند.
- کپی کد تقویم را می‌بندد و فوکوس به فیلد برمی‌گردد.
صدا، حرکت، چاپ
- صدا: پیش‌فرض کپی کد هنگام انتخاب روز. معادل بصری: تاریخ در فیلد عوض می‌شود.
- حرکت: باز شدن تقویم با توکن‌های overlay؛ در کاهش حرکت بدون انیمیشن.
- چاپ: کپی کد پیش‌فرض؛ تاریخ به‌صورت متن چاپ می‌شود.
توکن‌ها
- کامپوننتی: کپی کد، کپی کد (کپی کد، کپی کد، کپی کد)، کپی کد (پس‌زمینه، حاشیه، فاصلهٔ داخلی)، کپی کد (اندازه، پس‌زمینهٔ hover و انتخاب، رنگ روز خارج از ماه و انتخاب)، کپی کد، کپی کد، کپی کد، کپی کد.
- تعریف در کپی کد؛ فهرست کامل در کپی کد.
نکات
- مقدار کپی کد یک کپی کد است، نه کپی کد. برای ارسال به سرور از کپی کد (فرمت کپی کد) استفاده کنید.
- در حال حاضر تقویم شمسی روی مقدار میلادی نگاشت می‌شود؛ مقدار ذخیره‌شده همیشه میلادی است.
- برای تاریخ و ساعت با هم یا رویدادهای تقویمی از Calendar استفاده کنید.