منتقي الوقت TimePicker

منتقي الوقت. اختيار الساعة / الدقيقة / الثانية عبر أعمدة دوّارة؛ عندما لا يحتوي format على ss يُخفى عمود الثوانيات تلقائيًا؛ ويعرض arrowControl التحكم بأزرار في رأس العمود. تُحمَّل اللوحة على body (لا يوجد Teleport في Vue2).

اختيار الوقت

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhTimePicker v-model="t1" format="HH:mm:ss" placeholder="اختر الوقت" clearable />
      <LhTimePicker v-model="t2" format="HH:mm" placeholder="ساعة ودقيقة (بدون عمود الثواني)" size="small" />
      <LhTimePicker v-model="t3" format="HH:mm:ss" arrow-control placeholder="تحكم بالأسهم" size="large" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" disabled placeholder="معطّل" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" readonly placeholder="للقراءة فقط" />
    </div>
    <LhTimePicker
      v-model="t4"
      format="HH:mm:ss"
      :step-hour="2"
      :step-minute="15"
      :step-second="30"
      placeholder="الخطوة: ساعة 2 / دقيقة 15 / ثانية 30"
    />
    <p class="demo-note">ساعة ودقيقة وثانية: {{ fmt(t1) }}｜ساعة ودقيقة: {{ fmt(t2) }}｜أسهم: {{ fmt(t3) }}｜خطوات: {{ fmt(t4) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    t1: new Date(2026, 9, 3, 14, 30, 0),
    t2: null,
    t3: null,
    t4: null,
  }),
  methods: {
    fmt(v) {
      if (!(v instanceof Date)) return '(غير محدد)'
      const p = (n) => String(n).padStart(2, '0')
      return p(v.getHours()) + ':' + p(v.getMinutes()) + ':' + p(v.getSeconds())
    },
  },
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	القيمة المختارة حاليًا	Date \| null	—
mode	الوضع (مخصص للربط مع التاريخ والوقت، ويُعرض حاليًا كأعمدة وقت)	LhTimePickerMode	—
size	الحجم	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	معطّل / قابل للمسح / للقراءة فقط	boolean	false
placeholder	نص العنصر النائب	string	حزمة اللغة
format	صيغة العرض (HH:mm:ss, HH:mm)؛ يُخفى عمود الثوانيات عند غياب ss	string	'HH:mm:ss'
arrowControl	التحكم بالأسهم (زرّا أعلى وأسفل في رأس العمود)	boolean	false
stepHour / stepMinute / stepSecond	خطوة الساعة / الدقيقة / الثانية	number	1
teleportTarget	هدف تركيب الطبقة المنبثقة	string \| HTMLElement	'body'
sx	خاصية sx المختصرة للتخطيط	—	—

Events

input (v-model), change (value)

إمكانية الوصول

كل عمود role="spinbutton" + aria-valuenow/min/max، ويدعم كلٌّ من التمرير الدوّار والأسهم التنقّل بمفاتيح الاتجاه؛ العنصر المُشغِّل role="combobox" + aria-expanded، وزر التأكيد في اللوحة قابل للوصول بالتركيز.