منتقي التاريخ DatePicker

منتقي التاريخ. خمسة أنماط: date / month / year / datetime / range: يمكن التنقّل داخل اللوحة بين المستويات (يوم → شهر → سنة)، ويُلحق نمط datetime عمودًا للوقت أسفل التقويم (ساعة / دقيقة / ثانية، بالتمرير أو النقر، وتُدمج مع التاريخ عند التأكيد)، ونمط range اختيار على مرحلتين (النقرة الأولى تحدّد نقطة البداية وتُبرزها، والنقرة الثانية تطبّع الفترة وتُبرز الأيام المتوسطة)؛ تُركَّب اللوحة على body، ويتحكم format في صيغة العرض.

اختيار التاريخ

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhDatePicker v-model="date" placeholder="اختر تاريخًا" format="yyyy-MM-dd" clearable />
      <LhDatePicker v-model="month" mode="month" placeholder="اختر شهرًا" size="small" />
      <LhDatePicker v-model="year" mode="year" placeholder="اختر سنة" size="large" />
      <LhDatePicker v-model="datetime" mode="datetime" placeholder="اختر التاريخ والوقت" disabled />
      <LhDatePicker v-model="date" placeholder="للقراءة فقط" readonly />
    </div>
    <LhDatePicker
      v-model="range"
      mode="range"
      range-separator="إلى"
      placeholder="اختر فترة التاريخ (نقرتان)"
      :cell-class-name="cellClass"
      popper-class="demo-popper"
    />
    <p class="demo-note">
      التاريخ: {{ fmt(date) }} | الشهر: {{ fmt(month) }} | السنة: {{ fmt(year) }} | التاريخ والوقت: {{ fmt(datetime) }}
    </p>
    <p class="demo-note">فترة التاريخ (rangeSeparator="إلى"، عطلات نهاية الأسبوع بالأحمر): {{ fmtRange(range) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    date: new Date(2026, 9, 3),
    month: new Date(2026, 9, 1),
    year: new Date(2026, 0, 1),
    datetime: null,
    range: null,
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleString('zh-CN', { hour12: false }) : 'غير محدد'
    },
    fmtRange(v) {
      if (!Array.isArray(v) || v.length !== 2) return 'غير محدد'
      const [a, b] = v
      const s = (d) => (d instanceof Date ? d.toLocaleString('zh-CN', { hour12: false }) : 'غير محدد')
      return `${s(a)} ~ ${s(b)}`
    },
    cellClass(date) {
      return date.getDay() === 0 || date.getDay() === 6 ? 'demo-cell-weekend' : ''
    },
  },
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	التحديد الحالي	Date \| [Date, Date] \| null	—
mode	النمط: تاريخ / شهر / سنة / تاريخ ووقت / فترة تاريخ	'date' \| 'month' \| 'year' \| 'datetime' \| 'range'	'date'
size	الحجم	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	معطّل / قابل للتفريغ / للقراءة فقط	boolean	false / true / true
placeholder	نص عنصر النائب	string	حزمة اللغة
format	صيغة العرض (yyyy-MM-dd، yyyy-MM وغيرها)	string	'yyyy-MM-dd'
rangeSeparator	نص الفاصل في نمط فترة التاريخ	string	'~'
cellClassName	اسم فئة مخصص للخلية	(date: Date) => string	—
popperClass	اسم فئة إضافي للطبقة المنبثقة	string	—
teleportTarget	هدف تركيب الطبقة المنبثقة	string \| HTMLElement	'body'
sx	خصائص التخطيط السريع sx	—	—

Events

input (v-model)، change (value)

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

المشغّل role="combobox" + aria-expanded، واللوحة role="grid"؛ عمود الوقت في نمط datetime يأخذ role="spinbutton" مع aria-valuenow/min/max؛ وعند وضعها داخل LhFormItem وفشل التحقق يُضبط aria-invalid تلقائيًا.