Date Time Picker

Комбинированный выбор даты и времени с прокручиваемыми колонками времени, календарём с переходом по месяцам/годам, маскированным вводом и быстрыми действиями.

<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	Значение (v-model)
placeholder	string	'Pick date & time'	Подсказка
dateFormat	string	'YYYY-MM-DD'	Формат отображения даты
timeFormat	'HH:mm' | 'HH:mm:ss' | 'hh:mm A' | 'hh:mm:ss A'	'HH:mm'	Формат времени
valueFormat	string	same as display	Формат значения. 'timestamp' — миллисекунды
disabled	boolean	false	Отключить
clearable	boolean	true	Кнопка очистки
editable	boolean	true	Разрешить ввод по маске
mask	string	auto from format	Маска ввода
minDate	string | Date	null	Минимальная дата
maxDate	string | Date	null	Максимальная дата
disabledDate	(date: Date) => boolean	—	Функция отключения дат
disabledDates	(string | Date | number)[]	[]	Массив отключённых дат
firstDayOfWeek	number	1	Первый день недели
shortcuts	{ label, value }[]	[]	Быстрые варианты в боковой панели
triggerClass	string	''	Пользовательский класс триггера
triggerStyle	Record<string, string>	—	Пользовательские стили триггера

Events

Event	Type	Description
update:modelValue	(value: any) => void	Значение изменилось
change	(value: any) => void	Значение изменилось