Date Time Picker

Aylanib chiqadigan vaqt ustunlari, oy/yil bo'yicha chuqurlashuvchi kalendar, maskali kiritish va tezkor variantlar bilan birlashtirilgan sana va vaqt tanlovchi.

<script setup>
import { ref } from 'vue'
const datetime = ref(null)
</script>

<template>
  <VxDateTimePicker v-model="datetime" />
</template>

With Seconds

<template>
  <VxDateTimePicker v-model="datetime" time-format="HH:mm:ss" />
</template>

12-Hour Format

<template>
  <VxDateTimePicker v-model="datetime" time-format="hh:mm A" />
</template>

Custom Date Format

<template>
  <VxDateTimePicker v-model="datetime" date-format="DD.MM.YYYY" />
</template>

Quick Options

<script setup>
const shortcuts = [
  { label: 'Now', value: () => new Date() },
  { label: 'Today 9:00', value: () => { const d = new Date(); d.setHours(9, 0, 0); return d } },
]
</script>

<template>
  <VxDateTimePicker v-model="datetime" :shortcuts="shortcuts" />
</template>

Disabled Dates

<template>
  <VxDateTimePicker :disabled-date="isWeekend" />
</template>

Disabled Dates Array

<template>
  <VxDateTimePicker :disabled-dates="['2026-01-01', '2026-03-08']" />
</template>

Timestamp Value

<template>
  <VxDateTimePicker v-model="datetime" value-format="timestamp" />
</template>

Non-editable

Click to pick

<template>
  <VxDateTimePicker :editable="false" />
</template>

Disabled

2026-03-29 14:30

<template>
  <VxDateTimePicker v-model="datetime" disabled />
</template>

Props

Prop	Type	Default	Description
modelValue	string | Date | number | null	null	Qiymat (v-model)
placeholder	string	'Pick date & time'	Placeholder
dateFormat	string	'YYYY-MM-DD'	Sana ko'rinish formati
timeFormat	'HH:mm' | 'HH:mm:ss' | 'hh:mm A' | 'hh:mm:ss A'	'HH:mm'	Vaqt formati
valueFormat	string	same as display	Chiqish formati. ms uchun 'timestamp'
disabled	boolean	false	O'chirish
clearable	boolean	true	Tozalash tugmasi
editable	boolean	true	Mask bilan qo'lda kiritishga ruxsat berish
mask	string	auto from format	Kiritish maski
minDate	string | Date	null	Eng kichik sana
maxDate	string | Date	null	Eng katta sana
disabledDate	(date: Date) => boolean	—	Sanalarni o'chirish funksiyasi
disabledDates	(string | Date | number)[]	[]	O'chiriladigan sanalar massivi
firstDayOfWeek	number	1	Haftaning birinchi kuni
shortcuts	{ label, value }[]	[]	Yon paneldagi tezkor variantlar
triggerClass	string	''	Trigger uchun maxsus class
triggerStyle	Record<string, string>	—	Trigger uchun maxsus stillar

Events

Event	Type	Description
update:modelValue	(value: any) => void	Qiymat o'zgardi
change	(value: any) => void	Qiymat o'zgardi