منتقي الوقت TimePicker

LhTimePicker مكوّن منتقي لاختيار الوقت، يدعم التحديد الدقيق للساعات والدقائق والثواني.

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

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

03:32:45

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

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

<template>
  <LhTimePicker v-model="baseTime" />
</template>

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

<template>
  <LhTimePicker v-model="baseTime" />
</template>

حالة التعطيل

حالة التعطيل

03:32:45

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

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

<template>
  <LhTimePicker v-model="disabledTime" disabled />
</template>

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

<template>
  <LhTimePicker v-model="disabledTime" disabled />
</template>

تنسيق الوقت

تنسيق الوقت

03:32

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

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

<template>
  <LhTimePicker v-model="formatTime1" format="HH:mm" />
</template>

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

<template>
  <LhTimePicker v-model="formatTime1" format="HH:mm" />
</template>

زر المسح

زر المسح

03:32:45

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

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

<template>
  <LhTimePicker v-model="clearTime" clearable />
</template>

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

<template>
  <LhTimePicker v-model="clearTime" clearable />
</template>

نطاق وقت مخصص

نطاق وقت مخصص

08:32:45

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

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

<template>
  <LhTimePicker v-model="rangeTime" :start="8" :end="20" />
</template>

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

<template>
  <LhTimePicker v-model="rangeTime" :start="8" :end="20" />
</template>

الأحجام

الأحجام

03:32:45

03:32:45

03:32:45

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

const smallTime = ref(new Date())
const mediumTime = ref(new Date())
const largeTime = ref(new Date())
</script>

<template>
  <LhTimePicker v-model="smallTime" size="small" />
  <LhTimePicker v-model="mediumTime" size="medium" />
  <LhTimePicker v-model="largeTime" size="large" />
</template>

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

<template>
  <LhTimePicker v-model="smallTime" size="small" />
  <LhTimePicker v-model="mediumTime" size="medium" />
  <LhTimePicker v-model="largeTime" size="large" />
</template>

الخطوة

الخطوة

03:32:45

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

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

<template>
  <LhTimePicker v-model="stepTime" :stepMinute="5" :stepSecond="10" />
</template>

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

<template>
  <LhTimePicker v-model="stepTime" :stepMinute="5" :stepSecond="10" />
</template>

العنصر النائب والقراءة فقط والتحكم بمفاتيح الأسهم

يُخصَّص النص النائب عبر placeholder؛ وreadonly للقراءة فقط؛ وarrow-control للتمرير بين الأعمدة والاختيار بمفاتيح الأسهم؛ ويحدّد start / end نطاق الوقت؛ بينما تُخصِّص step-hour / step-minute / step-second خطوة كل عمود.

placeholder / readonly

03:32:45

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

<template>
  <!-- نص نائب -->
  <LhTimePicker v-model="tp1" placeholder="اختر وقت التذكير" />
  <!-- للقراءة فقط -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

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

<template>
  <!-- نص نائب -->
  <LhTimePicker v-model="tp1" placeholder="اختر وقت التذكير" />
  <!-- للقراءة فقط -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

TimePicker API

الخاصية	الوصف	النوع	القيمة الافتراضية
modelValue	الوقت المرتبط	Date	null
size	الحجم	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
disabled	التعطيل	boolean	false
clearable	إظهار زر المسح	boolean	true
placeholder	النص النائب (عند عدم تمريره يُولَّد وفق format، من حزمة اللغة timepicker.hour/minute/second)	string	''
format	تنسيق الوقت	string	'HH:mm:ss'
readonly	حقل الإدخال للقراءة فقط	boolean	true
arrowControl	إظهار الأسهم	boolean	false
start	ساعة البداية	number	0
end	ساعة النهاية	number	24
stepHour	خطوة الساعات	number	1
stepMinute	خطوة الدقائق	number	1
stepSecond	خطوة الثواني	number	1
sx	خصائص التخطيط السريع (مثل { mt: 2, w: '50%' })، تُحوَّل إلى تنسيقات مضمّنة تُطبَّق على العنصر الجذري للمُشغِّل (اللوحة المنبثقة لا تتأثر)	LhSxProps	—

TimePicker Events

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

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

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

LhTimePickerProps

export interface LhTimePickerProps {
  modelValue?: Date | null
  size?: LhComponentSize
  disabled?: boolean
  clearable?: boolean
  placeholder?: string
  format?: string
  readonly?: boolean
  arrowControl?: boolean
  start?: number
  end?: number
  stepHour?: number
  stepMinute?: number
  stepSecond?: number
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

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

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