Date Picker شمسی
یک <input> معمولی با data-datepicker تقویم شمسی می‌گیرد. کاربر تاریخ شمسی می‌بیند و می‌نویسد؛ اگر name داشته باشد، سرور تاریخ میلادی ISO را در همان نام دریافت می‌کند. به هر سال بین ۱ تا ۳۱۷۶ می‌شود رفت (فهرست اسکرولی سال، بدون نیاز به تایپ)، ماه و سال انتخاب‌شدنی‌اند و سه حالت (تاریخ، تاریخ و ساعت، بازه) دارد. ماژول datepicker لازم است.
<form data-validate ui="stack" style="max-inline-size:22rem">
<label ui="field"><span>تاریخ تحویل</span><input name="delivery" data-datepicker required data-min="1405/01/01" data-max="1406/12/29"><small>بین ۱۴۰۵/۰۱/۰۱ و ۱۴۰۶/۱۲/۲۹</small></label>
<label ui="field"><span>تاریخ تولد (اختیاری)</span><input name="birth" data-datepicker data-nav="dropdowns" value="1375/04/15"></label>
<label ui="field"><span>تاریخ و ساعت</span><input name="meeting" data-datepicker data-mode="datetime"></label>
<label ui="field"><span>بازهٔ رزرو</span><input name="stay" data-datepicker data-mode="range"></label>
<button ui="primary" type="submit">ثبت</button>
</form><form ui="stack" style="max-inline-size:22rem">
<label ui="field"><span>تاریخ تولد</span><input name="b2" data-datepicker data-start-view="years" data-year-shortcuts="18,25,40,60"></label>
<label ui="field"><span>چند تاریخ (حداکثر ۴)</span><input name="m2" data-datepicker data-mode="multiple" data-max-count="4"></label>
<label ui="field"><span>بازه با میان‌بُر</span><input name="r2" data-datepicker data-mode="range"></label>
<label ui="field"><span>رویداد و تعطیل</span><input name="e2" data-datepicker data-week-numbers data-gregorian data-marks="1405/08/10:جلسه" data-holidays="1405/08/05:تعطیل نمونه"></label>
</form>تاریخ را تایپ کنید (ارقام فارسی، عربی یا انگلیسی؛ جداکننده / یا -) یا تقویم را باز کنید. روی عنوان بالای تقویم بزنید تا به نمای ماه‌ها و بعد سال‌ها (۱۲ سال در هر صفحه) بروید؛ با data-nav="dropdowns" به‌جای آن یک فهرست ماه و یک فیلد سال می‌گیرید که هر سالی را می‌توان در آن نوشت. کلیدها: ←→ روز، ↑↓ هفته، PageUp/PageDown ماه (با Shift سال)، Enter انتخاب و Esc بستن.
| صفت / API | کار |
|---|---|
| data-mode | date (پیش‌فرض)، datetime (تاریخ + ساعت؛ مقدار YYYY-MM-DDTHH:mm) یا range (دو فیلد name_start و name_end). |
| data-min / data-max | حدود مجاز؛ شمسی (1405/01/01) یا میلادی (2026-03-21). |
| data-start-view | days، months یا years: نمای اولِ بازشدن. |
| data-nav | drill (پیش‌فرض) یا dropdowns. |
| data-week-start، data-weekend | روز شروع هفته (sat، sun، mon…) و روزهای تعطیل هفتگی. |
| data-disable-days، data-disable-dates | غیرفعال‌کردن روزهای هفته یا تاریخ‌های مشخص. |
| data-seconds، data-format="12"، data-minute-step | در حالت datetime همان گزینه‌های Time Picker. |
| data-inline | تقویم به‌جای پاپ‌اور، همیشه در صفحه دیده شود. |
| data-digits="en" | نمایش مقدار با ارقام انگلیسی. |
| data-mode="multiple"، data-max-count | انتخاب چند تاریخ (مقدار ارسالی: ISOها با ویرگول). |
| data-year-shortcuts="18,30,60" | دکمه‌های «۱۸ سال پیش» و … در نمای سال (مناسب تاریخ تولد). نمای سال یک فهرست اسکرولی است و دکمه‌های ±۱۰ و ±۱۰۰ سال دارد. |
| data-presets | در حالت بازه: today,yesterday,last7,last30,thisMonth,lastMonth,thisYear,lastYear (پیش‌فرض: شش مورد اول). |
| data-marks، data-holidays | 1405/08/10:برچسب, 1405/08/13 — نقطهٔ رویداد و رنگ تعطیل. |
| data-week-numbers، data-gregorian | ستون شمارهٔ هفته و روز میلادی کوچک در هر خانه. |
| data-input="jalali" | سال چهاررقمیِ ۱۷۰۰ به بالا هم شمسی خوانده شود (وگرنه میلادی فرض می‌شود). |
| data-today-button، data-clear-button، data-close-on-select | دکمه‌های «امروز» و «پاک‌کردن» و بسته‌شدن پس از انتخاب. |
| bana:date-change | رویداد با e.detail.iso، jalali و در حالت بازه start و end. |
| Bana.datepicker | open، close، get، set، refresh و configure / defaults برای پیش‌فرض‌های سراسری. |
| Bana.date.toJalali(date) | تبدیل Date به {jy, jm, jd}؛ همراه با fromJalali، parse، format، monthLength و isLeap. |
تغییر ظاهر و تم
ظاهر با توکن‌های CSS روی خود input یا هر والدی تنظیم می‌شود: --bana-dp-accent، -on-accent، -bg، -fg، -muted، -border، -hover، -weekend، -range، -radius، -cell-radius، -cell، -font و -shadow. برای حالت‌های آماده: data-variant (default، soft، solid، outline، minimal)، data-size (sm، md، lg)، data-shape (rounded، square، circle)، data-accent (فقط #hex، var(--x) یا oklch()) و data-class برای افزودن کلاس خودتان. نمونهٔ زنده با تغییر همهٔ این‌ها در صفحهٔ «تاریخ و ساعت» کیت ادمین است.
Intl مقایسه می‌شود. بیرون از این بازه و در برخی سال‌های بسیار دور، الگوریتم ما و ICU یک روز اختلاف دارند؛ برای تقویم رسمی ایران پیش از ۱۱۷۸ منبع رسمی لازم است. تست مرورگر فقط در Chromium انجام شده است.