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

LhDatePicker مكوّن منتقي للتاريخ والوقت، يدعم أوضاع اختيار متعددة مثل اليوم والشهر والسنة.

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

vue

<script setup lang="ts">
import { ref } from 'vue'

const baseDate = ref(new Date(2024, 0, 1))
</script>

<template>
  <LhDatePicker v-model="baseDate" />
</template>

vue

<script>
export default {
  data() {
    return {
      baseDate: new Date(2024, 0, 1),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="baseDate" />
</template>

حالة التعطيل

vue

<script setup lang="ts">
import { ref } from 'vue'

const disabledDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="disabledDate" disabled />
</template>

vue

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

<template>
  <LhDatePicker v-model="disabledDate" disabled />
</template>

تنسيق التاريخ

vue

<script setup lang="ts">
import { ref } from 'vue'

const formatDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>

vue

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

<template>
  <LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>

زر المسح

vue

<script setup lang="ts">
import { ref } from 'vue'

const clearDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="clearDate" clearable />
</template>

vue

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

<template>
  <LhDatePicker v-model="clearDate" clearable />
</template>

الحجم

vue

<script setup lang="ts">
import { ref } from 'vue'

const smallDate = ref(new Date())
const mediumDate = ref(new Date())
const largeDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="smallDate" size="small" />
  <LhDatePicker v-model="mediumDate" size="medium" />
  <LhDatePicker v-model="largeDate" size="large" />
</template>

vue

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

<template>
  <LhDatePicker v-model="smallDate" size="small" />
  <LhDatePicker v-model="mediumDate" size="medium" />
  <LhDatePicker v-model="largeDate" size="large" />
</template>

وضع الاختيار

يدعم mode القيم 'date' (افتراضي) / 'month' / 'year'. ويؤدي النقر على العنوان داخل اللوحة إلى النزول مستوىً مستوى: اليوم ← الشهر ← السنة؛ وفي وضعَي الشهر/السنة تفتح اللوحة مباشرةً على الشبكة المقابلة، ويؤدي النقر إلى التحديد والإغلاق (دون أزرار سفلية).

vue

<script setup lang="ts">
import { ref } from 'vue'

const monthDate = ref(new Date())
const yearDate = ref(new Date(2024, 0, 1))
</script>

<template>
  <LhDatePicker v-model="monthDate" mode="month" />
  <LhDatePicker v-model="yearDate" mode="year" />
</template>

vue

<script>
export default {
  data() {
    return {
      monthDate: new Date(),
      yearDate: new Date(2024, 0, 1),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="monthDate" mode="month" />
  <LhDatePicker v-model="yearDate" mode="year" />
</template>

العنصر النائب والقراءة فقط والتخصيص

يخصّص placeholder النص النائب؛ ويجعل readonly الحقل للقراءة فقط (تُفحص اللوحة دون القدرة على الاختيار)؛ ويخصّص range-separator فاصل المجال؛ ويضيف cell-class-name صنفًا مخصصًا لخلايا التاريخ؛ ويخصّص popper-class نمط اللوحة.

vue

<script setup lang="ts">
import { ref } from 'vue'
const dp1 = ref(null)
const dp2 = ref(new Date())
</script>

<template>
  <!-- نص نائب -->
  <LhDatePicker v-model="dp1" placeholder="يرجى اختيار تاريخ تسجيل الوصول" />
  <!-- قراءة فقط -->
  <LhDatePicker :model-value="dp2" readonly />
</template>

vue

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

<template>
  <!-- نص نائب -->
  <LhDatePicker v-model="dp1" placeholder="يرجى اختيار تاريخ تسجيل الوصول" />
  <!-- قراءة فقط -->
  <LhDatePicker :model-value="dp2" readonly />
</template>

واجهة برمجة تطبيقات DatePicker

ملاحظة: اختيار datetime والمجال لديهما حاليًا نوعٌ مُرحَّل فقط دون واجهة اختيار مقابلة (أعمدة الوقت ولوحة المجال غير منفَّذة، راجع سجلّ العائلة P-08). وعند تمرير قيمة مجال [Date, Date] من الخارج تُعرض اللوحة بشكل سليم، لكن التأكيد داخل اللوحة لا يتجاوز قيمة المجال.

الخاصية	الوصف	النوع	الافتراضي
modelValue	التاريخ المرتبط	`Date \| [Date, Date]`	`null`
mode	وضع الاختيار	`"date" \| "month" \| "year" \| "datetime"`	`'date'`
size	الحجم	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	ما إذا كان معطّلًا	`boolean`	`false`
clearable	ما إذا كان زر المسح يُعرض	`boolean`	`true`
placeholder	النص النائب (عند عدم تمريره يُولَّد وفق format، وتُؤخذ القيمة من حزمة اللغة `datepicker.year/month`)	`string`	`''`
format	تنسيق التاريخ	`string`	`'yyyy-MM-dd'`
readonly	حقل الإدخال للقراءة فقط	`boolean`	`true`
rangeSeparator	فاصل المجال	`string`	`'~'`
cellClassName	—	`(date: Date) => string`	—
popperClass	—	`string`	—
sx	خصائص التخطيط السريع (مثل `{ mt: 2, w: '50%' }`)، تُحوّل إلى أنماط سطرية تُطبَّق على العنصر الجذري للمُشغِّل (لا تتأثر لوحة القائمة المنبثقة)	`LhSxProps`	—

أحداث DatePicker

الحدث	الوصف	النوع
update:model-value	يُطلق عند تغيّر القيمة	`(value: Date \| [Date, Date]) => void`
change	يُطلق عند تأكيد تغيّر القيمة	`(value: Date \| [Date, Date]) => void`

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

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

LhDatePickerProps

export interface LhDatePickerProps {
  modelValue?: Date | [Date, Date] | null
  mode?: LhDatePickerMode
  size?: LhComponentSize
  disabled?: boolean
  clearable?: boolean
  placeholder?: string
  format?: string
  readonly?: boolean
  rangeSeparator?: string
  cellClassName?: (date: Date) => string
  popperClass?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhDatePickerMode _{(مأخوذ من @lh-ui/share/core/date-picker)}

/**
 * أوضاع DatePicker
 */
export type LhDatePickerMode = 'date' | 'month' | 'year' | 'datetime'

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

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

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

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

حالة التعطيل ​

تنسيق التاريخ ​

زر المسح ​

الحجم ​

وضع الاختيار ​

العنصر النائب والقراءة فقط والتخصيص ​

واجهة برمجة تطبيقات DatePicker ​

أحداث DatePicker ​

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