فهرست مستندات پروژه

صفحه‌کلید و دسترس‌پذیری

Intl Datepickerv0.4.2مشاهده منبعفارسی / انگلیسی

ورودی را نام‌گذاری کنید و رفتار صفحه‌کلید و نکات دسترس‌پذیری در سفارشی‌سازی را بشناسید.

برچسب انتخابگر

ماژول اصلی را وارد کنید و یک برچسب دیدنی بدهید:

<label for="birth-date">تاریخ تولد</label>
<intl-datepicker id="birth-date" name="birthDate" locale="en-GB"
  allow-input caption-layout="dropdown"
  min="1900-01-01" max="2026-03-15" value="1990-06-17"
  required></intl-datepicker>

این برچسب به combobox داخلی نام دسترس‌پذیر می‌دهد. aria-label روی میزبان هم می‌تواند نام را تعیین کند و بر متن برچسب متصل اولویت دارد. placeholder راهنماست و جای برچسب را نمی‌گیرد. ورودی سفارشی به نام و وضعیت مستقل نیاز دارد.

پنجره تقویم نقش dialog دارد و پنل درون‌صفحه‌ای نقش group. جدول روزها با عنوان ماه نام‌گذاری می‌شود و نام کامل روزهای هفته را در اختیار ابزارهای کمکی می‌گذارد. سلول‌های انتخاب‌شده وضعیت انتخاب دارند و امروز با aria-current="date" مشخص می‌شود. یک ناحیه زنده پایدار با اولویت ملایم، انتخاب‌ها، جابه‌جایی ماه و برخی انتخاب‌های ردشده را اعلام می‌کند. این‌ها رفتارهای پیاده‌سازی‌شده‌اند و به معنی تاییدیه برای همه ترکیب‌های مرورگر و صفحه‌خوان نیستند.

کار با صفحه‌کلید

کلیدمحلرفتار
Down یا Alt+Downورودی داخلیباز کردن و فوکوس روی سلول جاری
Enterورودی دارای allow-inputتجزیه و انتخاب تاریخ تایپ‌شده
Left و Rightجدول روزهاروز قبل و بعد؛ در راست‌به‌چپ معکوس است
Up و Downجدول روزهاهفت روز عقب و جلو
Home و Endجدول روزهاابتدا و انتهای هفته تنظیم‌شده
PageUp و PageDownجدول روزهاماه قبل و بعد
Shift+PageUp و Shift+PageDownجدول روزهاسال قبل و بعد
Enter یا Spaceسلول روز، ماه یا سالانتخاب در صورت مجاز بودن
کلیدهای جهتنمای ماه و سالحرکت بین سلول‌ها؛ ۳ ستون برای ماه و ۴ ستون برای سال
Escapeپنجرهبستن، از جمله در نمای ماه و سال
Tab و Shift+Tabپنجرهگردش فوکوس بین کنترل‌های پنجره

حرکت در جدول روزها، فوکوس را به min و max محدود می‌کند. روزهای غیرفعال می‌توانند فوکوس بگیرند تا Enter دلیل غیرمجاز بودن را اعلام کند. اشاره ماوس بازه را ثبت نمی‌کند و وضعیت انتخاب اعلام‌شده را تغییر نمی‌دهد. پنل درون‌صفحه‌ای Tab را محصور نمی‌کند و با Escape بسته نمی‌شود. در انتخابگر روز درون‌صفحه‌ای، Escape از سلول ماه یا سال به نمای روز برمی‌گردد. در پنجره، پردازشگر Escape سند، پنل را هم می‌بندد.

هنگام بسته شدن پنجره، اگر فوکوس هنوز داخل انتخابگر باشد، به محرک بازکننده برمی‌گردد. اگر کاربر به جای دیگری رفته باشد، کامپوننت فوکوس را پس نمی‌گیرد. برنامه‌ای که intl-close را لغو می‌کند باید راه قابل استفاده دیگری برای بستن داشته باشد.

تایپ تاریخ

allow-input تایپ را در ورودی داخلی یا slot فعال می‌کند. متن با Enter یا خروج فوکوس از کامپوننت ثبت می‌شود. راهنمای قالب نمایش داده می‌شود؛ متن نامعتبر همراه با خطا باقی می‌ماند تا اصلاح یا پاک شود و در اعتبارسنجی badInput ایجاد می‌کند.

بخش‌های تاریخ در تقویم فعال تفسیر می‌شوند. در انتخابگر شمسی، ۱۴۰۳/۰۱/۰۱ روز اول سال ۱۴۰۳ است و مقدار ISO برابر 2024-03-20 می‌دهد. این رفتار با value برنامه‌نویسی متفاوت است که روز میلادی ISO می‌پذیرد.

date-format یکی از auto، YMD، DMY یا MDY است. حالت خودکار از ترتیب محلی استفاده می‌کند؛ بخش دارای دست‌کم ۳ رقم هم به تشخیص سال کمک می‌کند. جداکننده‌ها شامل ممیز، نقطه، خط تیره و فاصله‌اند. ورودی فشرده ۸ رقمی و چند مجموعه رقم بومی پذیرفته می‌شود؛ تاریخی که همه بخش‌هایش حداکثر ۲ رقم دارند، به دلیل ابهام رد می‌شود.

تایپ، یک روز را تجزیه و سپس همان انتخاب را به حالت جاری اعمال می‌کند. بازه کامل start/end، فهرست با ویرگول یا شناسه هفته ISO را تجزیه نمی‌کند. در حالت بازه، دو سر را جداگانه وارد کنید. برای ماه و سال، از پنل استفاده کنید یا یک روز کامل در دوره مورد نظر بدهید. تجزیه عددی است و زبان طبیعی یا همه قالب‌های دوره ژاپنی را پشتیبانی نمی‌کند.

بررسی پس از سفارشی‌سازی

کادر فوکوس، تمایز خوانای حالت انتخاب و غیرفعال و برچسب‌های کاربردی را حفظ کنید. سبک‌ها قواعد رنگ اجباری و کاهش حرکت دارند. حتی اگر --idp-day-size کوچک‌تر باشد، هدف روز از ۲۴ پیکسل کوچک‌تر نمی‌شود؛ اندازه مناسب کاربران خود را انتخاب کنید.

پس از تغییر mapDays، پنهان کردن روزهای بیرونی، جایگزینی ورودی یا استفاده در پنجره modal، مسیر صفحه‌کلید را بررسی کنید. محتوای سفارشی باید مکمل نام دسترس‌پذیر روز باشد. اطلاعات ضروری رزرو را فقط در tooltip نگذارید. مسیرهای عمومی تغییر ظاهر در راهنمای ظاهر آمده‌اند.

جستجو در مستندات

در همه پروژه‌ها جستجو کنید. با بستن این پنجره به راهنما برمی‌گردید.

Tab برای جابه‌جایی · Enter برای باز کردنEsc برای بستن