رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

انتخاب تاریخ

وضعیت: پیش‌نویس

سال/ماه/روز

<div class="hq-field">
  <label class="hq-field__label" for="meeting">تاریخ جلسهٔ اول</label>
  <div class="hq-datepicker" data-hq-datepicker>
    <input class="hq-input" id="meeting" type="text" inputmode="numeric" placeholder="۱۴۰۵/۰۸/۱۵" aria-describedby="meeting-help" />
    <button class="hq-datepicker__button" type="button" aria-label="باز کردن تقویم" aria-expanded="false" aria-controls="meeting-panel"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20 V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"/></svg></button>
    <div class="hq-datepicker__panel" id="meeting-panel" role="dialog" aria-label="انتخاب تاریخ" hidden></div>
  </div>
  <p class="hq-field__helper" id="meeting-help">سال/ماه/روز</p>
</div>

چه وقت استفاده کنیم

Section titled “چه وقت استفاده کنیم”
  • وقتی کاربر یک روز مشخص را انتخاب می‌کند: جلسه، شروع پروژه، مهلت.
  • تقویم کمک است، نه تنها راه؛ فیلد همیشه تایپ را هم می‌پذیرد.

چه وقت استفاده نکنیم

Section titled “چه وقت استفاده نکنیم”
  • تاریخ تولد یا تاریخ‌های دور: سه فیلد سال، ماه و روز ساده‌تر از ورق زدن ده‌ها سال است.
  • وقتی فقط ماه یا سال مهم است.

قواعد تقویم

Section titled “قواعد تقویم”
  • تقویم شمسی با نام ماه‌های فارسی و رقم فارسی. هفته از شنبه شروع می‌شود.
  • جمعه با رنگ negative مشخص است، همان‌طور که در تقویم‌های ایرانی رایج است.
  • امروز حلقهٔ accent دارد و روز انتخاب‌شده زمینهٔ accent.
  • مقدار نمایشی ۱۴۰۵/۰۸/۰۷ است؛ همان تاریخ به میلادی (2026-10-29) در data-hq-value فیلد نوشته می‌شود تا سامانه‌ها بی‌دردسر بخوانندش.
  • فیلد رقم فارسی و لاتین را می‌پذیرد و بعد از ترک فیلد آن را به شکل استاندارد درمی‌آورد. تاریخ نادرست (مثلاً ۳۱ مهر) خطا می‌گیرد.

سال/ماه/روز

<div class="hq-field">
  <label class="hq-field__label" for="start">شروع پروژه</label>
  <div class="hq-datepicker" data-hq-datepicker>
    <input class="hq-input" id="start" type="text" inputmode="numeric" placeholder="۱۴۰۵/۰۸/۱۵" aria-describedby="start-help" value="۱۴۰۵/۰۹/۰۱" />
    <button class="hq-datepicker__button" type="button" aria-label="باز کردن تقویم" aria-expanded="false" aria-controls="start-panel"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20 V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"/></svg></button>
    <div class="hq-datepicker__panel" id="start-panel" role="dialog" aria-label="انتخاب تاریخ" hidden></div>
  </div>
  <p class="hq-field__helper" id="start-help">سال/ماه/روز</p>
</div>
انجام بدهفیلدی که هم تایپ و هم تقویم را می‌پذیرد، با الگوی «سال/ماه/روز» زیر آن.
انجام ندهتقویم میلادی یا فیلدی که فقط با کلیک روی تقویم پر می‌شود.