رفتن به محتوای اصلی

انتخابگر تاریخ و ساعت

وضعیت​

هدفِ normative. وب انتخابگرهای واقعی دارد اما به‌صورت کنترل‌های جدا (تاریخ/ساعت جداگانه) نه قرص پیوستهٔ دو-سِگمنتی؛ پذیرش در وضعیت پذیرش طراحی. کلاس .dt-field prototype-only.

هدف​

یک کنترل پیوسته به‌جای چهار جعبهٔ جدا: سِگمنت تاریخ (بازکردن تقویم جلالی) + خط جداکننده + سِگمنت ساعت با دو سلکت بی‌خطِ «ساعت : دقیقه». در یک سطر جا می‌شود حتی در ۳۲۰px.

ساختار​

<div class="dt-field">
  <button class="dt-date" data-dp="start">…۹ شهریور</button>
  <span class="dt-sep"></span>
  <div class="dt-time">
    <select class="dt-t">…</select><span class="dt-colon">:</span>
    <select class="dt-t">…</select>
  </div>
</div>

گونه‌ها و اندازه‌ها​

یک گونه، ارتفاع ۴۲px (هم‌راستا با فیلد ورودی). سِگمنت تاریخ دکمه است؛ ساعت دو سلکت ۴۶px بی‌خط و بی‌چورون، ارقام فارسی، وسط‌چین.

حالت‌ها​

استیت / جزءرفتار
defaultقرص با خط --border
hoverخط --border-strong
focus-visible / .openکل قرص هالهٔ برند — حتی وقتی فوکوس روی سلکت ساعت است
activeهمان فوکوس؛ سِگمنت تاریخ پاپ‌آور تقویم را باز می‌کند
.time-offبا «تمام‌روز» سِگمنت ساعت محو-نیمه‌شفاف و غیرکلیک‌شدنی
.field.invalidکل قرص قرمز تعطیلات + متن خطا زیر آن (error)
disabledکم‌رنگ؛ معمولاً همراه قفل کل فرم
loading / successندارد (نپذیرفتن) — هنگام ذخیره، دکمهٔ فرم حالت بارگذاری می‌گیرد

رفتار​

  • سِگمنت تاریخ = دکمه؛ کلیک پاپ‌آور ۲۷۲px تقویم جلالی را زیر قرص باز می‌کند (الگوی انتخاب تاریخ جلالی).
  • بازشدن پاپ‌آور، قرصِ تاریخ را با .open روشن نگه می‌دارد (لنگر و هاله).
  • فعال‌کردن «تمام‌روز» ساعت را خاموش می‌کند؛ خاموش‌کردنش مقدار قبلی ساعت را برمی‌گرداند.

کیبورد و دسترس‌پذیری​

  • Tab: تاریخ → ساعت → دقیقه؛ Esc پاپ‌آور را می‌بندد (قبل از دیالوگِ والد).
  • سلکت‌های ساعت بومی‌اند — فلش‌ها کار می‌کنند؛ aria-label «ساعت شروع»/«دقیقهٔ شروع» جدا برای هر سلکت.
  • دکمهٔ تاریخ با متن کامل تاریخ به‌عنوان نامِ دسترس‌پذیر («۹ شهریور»).

رفتار واکنش‌گرا​

در گرید ۲تاییِ «شروع/پایان» دو قرص هم‌عرض کنار هم؛ زیر ~380px به یک ستون می‌شکنند. پاپ‌آور تقویم در نزدیکی لبهٔ پایین بالا flip می‌کند.

قواعد محتوا​

  • ✅ تاریخ با «روز ماه» فارسی و بدون سال (سال در tooltip/عنوان پاپ‌آور).
  • ❌ چهار فیلد جدا (روز/ماه/سال/ساعت)؛ AM/PM — ساعت ۲۴تایی است.

توکن‌ها​

خط --border/--border-strong · هالهٔ برند ۱۴٪ · خطا --holiday · شعاع ۱۰.

پیاده‌سازی پلتفرم‌ها​

  • وب: کنترل‌های جدا — JalaliDatePicker.tsx (پاپ‌آور portal شده به body) و JalaliTimePicker.tsx؛ مصرف‌کننده: EventModal.tsx.
  • اندروید: WheelPicker و BottomSheet در core/design — component/WheelPicker.kt.
  • .dt-field فقط در ui-design/prototypes/assets/app.css (prototype-only).

نمونهٔ تعاملی​

کتابخانهٔ زندهٔ انتخابگر