Time Picker
یک <input> با data-timepicker انتخاب‌گر ساعت با ستون‌های ساعت، دقیقه (و ثانیه) می‌گیرد. مقدار ارسالی همیشه ۲۴ساعته HH:mm[:ss] است، حتی اگر نمایش ۱۲ساعته باشد. ماژول timepicker لازم است.
<form ui="stack" style="max-inline-size:22rem">
<label ui="field"><span>ساعت جلسه</span><input name="at" data-timepicker data-minute-step="5" data-min-time="08:00" data-max-time="18:00"></label>
<label ui="field"><span>ساعت ۱۲ساعته با ثانیه</span><input name="at12" data-timepicker data-format="12" data-seconds></label>
</form>ساعت را تایپ کنید (14:30، ۱۴:۳۰، 2:30 pm، ۲:۳۰ ب.ظ) یا از ستون‌ها انتخاب کنید. در هر ستون ↑↓، PageUp/PageDown، Home/End و بین ستون‌ها ←→ کار می‌کند. گزینه‌های بیرون از بازه غیرفعال می‌شوند.
| صفت / API | کار |
|---|---|
| data-format | 24 (پیش‌فرض) یا 12 (با ق.ظ / ب.ظ). |
| data-seconds | ستون ثانیه هم نمایش داده شود. |
| data-hour-step، data-minute-step، data-second-step | گام هر ستون. |
| data-min-time، data-max-time | حدود مجاز، مثل 08:00. |
| data-inline | همیشه در صفحه نمایش داده شود. |
| data-variant، data-size، data-shape، data-accent، data-class | همان گزینه‌های ظاهری Date Picker؛ توکن‌ها هم --bana-dp-* هستند. |
| bana:time-change | رویداد با e.detail.value (۲۴ساعته) و time. |
| Bana.timepicker | open، close، get، set و refresh. |