تقويم Calendar

تقويم بعرض شهري. يعيد استخدام خوارزمية الشبكة الشهرية من DatePicker core، ويدعم قيود النطاق والتنقّل بشبكة مفاتيح الأسهم.

الاستخدام الأساسي

الاستخدام الأساسي

أكتوبر 2026

الأحدالإثنينالثلاثاءالأربعاءالخميسالجمعةالسبت

<script setup>
import { ref } from 'vue'
const date = ref(new Date())
</script>

<template>
  <LhCalendar v-model="date" />
</template>

<script>
export default {
  data() {
    return { date: new Date() }
  },
}
</script>

<template>
  <LhCalendar v-model="date" />
</template>

فترة زمنية واختيار متعدد

يدعم selection ثلاثة أوضاع: 'single' (افتراضي) / 'range' (نقرتان لتحديد البداية والنهاية) / 'multiple' (نقر لتبديل تواريخ متعددة).

فترة زمنية

أكتوبر 2026

الأحدالإثنينالثلاثاءالأربعاءالخميسالجمعةالسبت

نوفمبر 2026

الأحدالإثنينالثلاثاءالأربعاءالخميسالجمعةالسبت

<script setup>
import { ref } from 'vue'
const span = ref([new Date(2026, 8, 5), new Date(2026, 8, 20)])
</script>

<template>
  <LhCalendar v-model="span" selection="range" :panels="2" />
</template>

<script>
export default {
  data() {
    return { span: [new Date(2026, 8, 5), new Date(2026, 8, 20)] }
  },
}
</script>

<template>
  <LhCalendar v-model="span" selection="range" :panels="2" />
</template>

اختيار متعدد

أكتوبر 2026

الأحدالإثنينالثلاثاءالأربعاءالخميسالجمعةالسبت

<script setup>
import { ref } from 'vue'
const dates = ref([new Date(2026, 8, 10)])
</script>

<template>
  <LhCalendar v-model="dates" selection="multiple" />
</template>

<script>
export default {
  data() {
    return { dates: [new Date(2026, 8, 10)] }
  },
}
</script>

<template>
  <LhCalendar v-model="dates" selection="multiple" />
</template>

قيود النطاق القابل للاختيار

قيد النطاق

أكتوبر 2026

الأحدالإثنينالثلاثاءالأربعاءالخميسالجمعةالسبت

<script setup>
import { ref } from 'vue'

// ملاحظة: تبدأ الأشهر في JS من 0، أي أن new Date(2026, 8, 1) هو 1 سبتمبر
const range = [new Date(2026, 8, 1), new Date(2026, 8, 28)]
const rangeDate = ref(new Date())
</script>

<template>
  <LhCalendar v-model="rangeDate" :range="range" />
</template>

<script>
export default {
  data() {
    return {
      // ملاحظة: تبدأ الأشهر في JS من 0، أي أن new Date(2026, 8, 1) هو 1 سبتمبر
      range: [new Date(2026, 8, 1), new Date(2026, 8, 28)],
      rangeDate: new Date(),
    }
  },
}
</script>

<template>
  <LhCalendar v-model="rangeDate" :range="range" />
</template>

الشكل المطوي input

يضمّ mode="input" اللوحة الدائمة داخل حقل إدخال تنفتح عند النقر، موفّرًا المساحة العمودية. ويتحكم panels في عدد ألواح الأشهر بعد الانفتاح، ويخصّص placeholder النص النائب، ويحدد close-on-select ما إذا كانت تُطوى تلقائيًا بعد الاختيار.

شكل input + لوحتان

أكتوبر 2026

الأحدالإثنينالثلاثاءالأربعاءالخميسالجمعةالسبت

نوفمبر 2026

الأحدالإثنينالثلاثاءالأربعاءالخميسالجمعةالسبت

<script setup>
import { ref } from 'vue'
const inputDate = ref(new Date())
</script>

<template>
  <LhCalendar
    v-model="inputDate"
    mode="input"
    :panels="2"
    placeholder="يرجى اختيار تاريخ"
  />
</template>

<script>
export default {
  data() {
    return { inputDate: new Date() }
  },
}
</script>

<template>
  <LhCalendar
    v-model="inputDate"
    mode="input"
    :panels="2"
    placeholder="يرجى اختيار تاريخ"
  />
</template>

عدم الطي التلقائي بعد الاختيار

أكتوبر 2026

الأحدالإثنينالثلاثاءالأربعاءالخميسالجمعةالسبت

<script setup>
import { ref } from 'vue'
const inputDate2 = ref(new Date())
</script>

<template>
  <LhCalendar
    v-model="inputDate2"
    mode="input"
    :close-on-select="false"
    placeholder="إبقاء اللوحة مفتوحة بعد الاختيار"
  />
</template>

<script>
export default {
  data() {
    return { inputDate2: new Date() }
  },
}
</script>

<template>
  <LhCalendar
    v-model="inputDate2"
    mode="input"
    :close-on-select="false"
    placeholder="إبقاء اللوحة مفتوحة بعد الاختيار"
  />
</template>

API

خصائص LhCalendar

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

أحداث LhCalendar

الحدث	الوصف	معاملات الاستدعاء
update:modelValue	يُطلق عند تغيّر القيمة المختارة (v-model)	(value: Date | Date[])
change	يُطلق عند تغيّر القيمة المختارة	(value: Date | Date[])
select	يُطلق عند اختيار تاريخ (بالنقر أو التنقّل بلوحة المفاتيح)	(value: Date)

الفتحات: cell (خلية مخصصة)، header (الرأس).

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

• دلالة الشبكة role="grid" (صفوف row وخلايا gridcell)، ويُعلَّم اليوم الحالي بـ aria-current="date"
• تنقل مفاتيح الأسهم بين التواريخ (±1 يوم / ±7 أيام)، وHome/End إلى طرفَي الصف، وPageUp/Down لتقليب الأشهر — موائمةً لنمط APG grid
• التواريخ خارج النطاق تُزال من التفاعل عبر disabled أصلي

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن خارجيًا (مستخرَجة تلقائيًا من packages/components/calendar/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لعرض التعريف كاملًا؛ وصف الخصائص في جدول الخصائص أعلاه):

LhCalendarMode

/** شكل العرض: panel لوحة دائمة (افتراضي) / input لوحة مطوية تنفتح عند النقر على حقل الإدخال */
export type LhCalendarMode = 'panel' | 'input'

LhCalendarValue

/** يتغير شكل القيمة المحكومة وفق selection: فردي Date / فترة زمنية Date[] (طول 2: بداية ونهاية) / متعدد Date[].
 *  لا يُستخدم صف (tuple) من النوع [Date, Date]: فمصرّف SFC لا يستطيع استنتاج النوع وقت التشغيل من الصفوف، مما يسبب تحذيرًا في التحقق من الخصائص */
export type LhCalendarValue = Date | Date[]

LhCalendarProps

export interface LhCalendarProps {
  /** الاختيار الحالي (v-model محكوم؛ عند عدم تمريره يحتفظ المكوّن بحالة الاختيار داخليًا) */
  modelValue?: LhCalendarValue
  /** وضع الاختيار: فردي (افتراضي) / فترة زمنية (تاريخ البداية والنهاية) / متعدد */
  selection?: LhCalendarSelection
  /** قيد نطاق التواريخ القابلة للاختيار */
  range?: LhCalendarRange
  /** شكل العرض: panel لوحة دائمة (افتراضي) / input لوحة مطوية تنفتح عند النقر على حقل الإدخال */
  mode?: LhCalendarMode
  /** عدد ألواح الأشهر المعروضة معًا (مرتبة بـ flex مع الالتفاف) */
  panels?: number
  /** النص النائب في وضع input */
  placeholder?: string
  /** ما إذا كانت اللوحة تُطوى تلقائيًا بعد الاختيار في وضع input */
  closeOnSelect?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhCalendarSelection _{(مأخوذ من @lh-ui/share/core/calendar)}

/** وضع الاختيار: فردي / فترة زمنية (بداية ونهاية) / متعدد */
export type LhCalendarSelection = 'single' | 'range' | 'multiple'

LhCalendarRange _{(مأخوذ من @lh-ui/share/core/calendar)}

/** قيد نطاق التواريخ القابلة للاختيار */
export type LhCalendarRange = [Date, Date]