تقويم Calendar

عرض تقويمي. يدعم ثلاثة أنماط اختيار: فردي / فترة / متعدد، ويقيّد range حدود التواريخ القابلة للاختيار؛ وضع panel يُعرض دائمًا، ووضع input يُطوى في حقل إدخال ينفتح بالنقر (تُركَّب اللوحة على body).

تقويم

<template>
  <div class="demo-col" style="max-width: none">
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap">
      <LhCalendar v-model="single" selection="single" />
      <LhCalendar v-model="span" selection="range" mode="input" placeholder="اختر فترة" />
    </div>
    <p class="demo-note">اختيار فردي: {{ fmt(single) }} | فترة: {{ fmtArr(span) }}</p>
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap; margin-top: 16px">
      <LhCalendar v-model="multi" selection="multiple" :panels="2" :close-on-select="false" />
      <LhCalendar v-model="strict" selection="range" mode="panel" />
    </div>
    <p class="demo-note">تحديد متعدد (لوحتان مع panels=2، لا يُطوى تلقائيًا مع closeOnSelect=false): {{ fmtArr(multi) }}</p>
    <p class="demo-note">وضع اللوحة مع range (mode="panel"): {{ fmtArr(strict) }}</p>
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap; margin-top: 16px">
      <LhCalendar v-model="clamped" selection="single" :range="bounds" />
    </div>
    <p class="demo-note">تقييد النطاق القابل للاختيار عبر range (فقط 2026-10-01 ~ 2026-10-15): {{ fmt(clamped) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: new Date(2026, 9, 3),
    span: [],
    multi: [],
    strict: [],
    clamped: new Date(2026, 9, 5),
    bounds: [new Date(2026, 9, 1), new Date(2026, 9, 15)],
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleDateString('zh-CN') : 'غير محدد'
    },
    fmtArr(v) {
      if (!Array.isArray(v) || v.length === 0) return 'غير محدد'
      return v.map((d) => d.toLocaleDateString('zh-CN')).join(' ~ ')
    },
  },
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	التحديد الحالي؛ الفردي يكون Date، والفترة والمتعدد Date[]	Date \| Date[]	—
selection	نمط التحديد	'single' \| 'range' \| 'multiple'	'single'
range	نطاق التواريخ القابلة للاختيار [start, end]، وما خارجه معطّل	[Date, Date]	—
mode	شكل العرض: panel لوحة دائمة / input حقل إدخال مطوي	'panel' \| 'input'	'panel'
panels	عدد ألواح الأشهر المعروضة معًا (مرتبة بواسطة flex مع الالتفاف)	number	1
placeholder	نص عنصر النائب في وضع input	string	حزمة اللغة
closeOnSelect	هل تُطوى اللوحة تلقائيًا بعد التحديد في وضع input	boolean	true
sx	خصائص التخطيط السريع sx	—	—

Events

input (v-model)، change (value)، select (date)

Slots

فتحة	الوصف
header	رأس لوحة الشهر، معاملات النطاق { year, month } (يُعرض افتراضيًا بالتنسيق «YYYY / M»)
cell	خلية التاريخ، معامل النطاق { date } (يُعرض افتراضيًا رقم اليوم)

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

اللوحة بـ role="grid"، وصف الأيام بـ role="row"، وخلايا التاريخ بـ role="gridcell"؛ التواريخ المعطّلة تأخذ aria-disabled، ومشغّل وضع input يدعم التوسيع بلوحة المفاتيح والتنقل بمفاتيح الأسهم.