تم تاریک
انتخابگر تاریخ Date Picker
کامپوننت Date Picker به کاربر اجازه میدهد یک تاریخ مشخص یا یک بازه زمانی (Date Range) را از طریق تقویم تعاملی یا ورود دستی انتخاب کند. این کامپوننت برای فرمهای رزرو، فیلتر کردن گزارشهای آنالیتیکس و تنظیم بازههای زمانی در سرویسهای ابری استفاده میشود.
نمونه زنده
آناتومی
انتخابگر تاریخ از دو بخش اصلی اینپوت ورودی (Trigger) و پاپاور تقویم (Calendar Popover) تشکیل شده است:
(عکس ۱: تصویر آناتومی Date Picker شامل فیلد ورودی، آیکون تقویم، هدر navigation تقویم، روزهای هفته، روزهای ماه، وضعیت امروز و اکشنبار پایین)
- فیلد ورودی (Input Field): نمایش تاریخ انتخابشده یا ساختار Placeholder (مانند
YYYY/MM/DD). - آیکون راهنما (Leading Icon): آیکون تقویم جهت تشخیص سریع نوع فیلد.
- هدر ناوبری (Calendar Header): کنترلهای پیمایش بین ماهها و سالها (کلیدهای قبلی/بعدی و منوی ماه/سال).
- شبکه روزها (Day Grid): ماتریس نمایش روزهای ماه به همراه روزهای هفته.
- نشانگر امروز (Today Indicator): هایلایت ملایم یا بردر مشخص دور روز جاری.
- اکشنبار (Footer Actions): دکمههای میانبر (مثل "امروز"، یا "تایید").
ساختار
برای حفظ تناسب بصری و جلوگیری از خطای لمسی در تقویم، ابعاد و فواصل زیر استانداردسازی شدهاند:
( نمایش فنی ابعاد Date Picker همراه با جزئیات ابعاد سلولهای روز، پدینگ پاپاور و فواصل هدر به پیکسل)
- عرض پاپاور (Popover Width): مقدار ثابت
352pxبرای انتخاب تاریخ - سایز سلولهای روز (Day Cell): مربعی با ابعاد
40px * 40pxو انحنایRadius-SM. - فاصله بین سلولها (Grid Gap): مقدار
8pxاز هر طرف.
انواع
| نوع ورینت | ساختار تعاملی |
|---|---|
| انتخاب تاریخ (Date-picker) | انتخاب یک روز مشخص از تقویم |
| انتخاب ساعت (Time-Picker) | انتخاب یک ساعت مشخص از روز |
| ترکیبی با زمان (Date-Time-Picker) | انتخاب تاریخ و ساعت در کنار هم |
حالتها
(عکس ۳: نمایش وضعیتهای مختلف سلولهای تقویم شامل Default ،Hover ،Selected ،Range Start/End ،Range In-between و Disabled)
| وضعیت سلول (State) | استایل بصری |
|---|---|
| Default | متن با رنگ اصلی روی پسزمینه شفاف. |
| Hover | پسزمینه خاکستری روشن ($bg-primary-t1-1-hover) جهت بازخورد حرکتی. |
| Selected (انتخابشده) | پسزمینه پررنگ برند ($bg-primary-t3-1-default) با متن سفید. |
| Range Start / End | پسزمینه $bg-primary-t3-1-default با لبههای گرد شده در سمت شروع و پایان بازه. |
| Range In-between | پسزمینه آبی بسیار روشن ($bg-primary-t2-1-default) بین دو تاریخ انتخابشده. |
| Disabled | رنگ متن کمرنگ ($fg-neutral-t1-2-disabled) و غیرقابل کلیک (مثلاً روزهای گذشته برای رزرو). |
راهنمای استفاده
بایدها
- امکان تایپ دستی: علاوه بر انتخاب از روی تقویم، اجازه دهید کاربر بتواند تاریخ را به صورت دستی با کیبورد در فیلد ورودی تایپ کند (همراه با فرمتدهی خودکار
/). - استفاده از میانبرها (Presets): برای فیلترهای بازه زمانی، میانبرهای سریع مانند "۷ روز گذشته"، "این ماه"، یا "۳۰ روز گذشته" را در کنار تقویم قرار دهید.
- محدودسازی تاریخهای غیرمجاز: روزهایی که امکان انتخاب آنها وجود ندارد را به صورت واضع Disabled کنید تا از ارسال فرم با داده اشتباه جلوگیری شود.
نبایدها
- برای دریافت سال تولد از Date Picker با ناوبری ماهبه-ماه استفاده نکنید؛ در این سناریوها فیلد Dropdown یا تایپ مستقیم سال بسیار سریعتر است.
- پاپاور تقویم را بدون دکمههای مشخص "تایید" یا "انصراف" در فرمهای سنگین رها نکنید.
دسترسیپذیری
ناوبری کیبورد (Keyboard Navigation):
- کلیدهای جهتنما (
Arrow Keys): حرکت بین روزهای هفته و ماه. - کلید
Page Up / Page Down: انتقال به ماه قبلی / بعدی. - کلید
EnterیاSpace: انتخاب روز فعال.