Date Time Picker

Combined date and time picker with scrollable time columns, calendar with month/year drill-down, masked input, and quick options.

<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	Value (v-model)
placeholder	string	'Pick date & time'	Placeholder
dateFormat	string	'YYYY-MM-DD'	Date display format
timeFormat	'HH:mm' | 'HH:mm:ss' | 'hh:mm A' | 'hh:mm:ss A'	'HH:mm'	Time format
valueFormat	string	same as display	Output format. 'timestamp' for ms
disabled	boolean	false	Disable
clearable	boolean	true	Clear button
editable	boolean	true	Allow typing with mask
mask	string	auto from format	Input mask
minDate	string | Date	null	Min date
maxDate	string | Date	null	Max date
disabledDate	(date: Date) => boolean	—	Disabled date function
disabledDates	(string | Date | number)[]	[]	Disabled dates array
firstDayOfWeek	number	1	First day of week
shortcuts	{ label, value }[]	[]	Quick options sidebar
triggerClass	string	''	Custom trigger class
triggerStyle	Record<string, string>	—	Custom trigger styles

Events

Event	Type	Description
update:modelValue	(value: any) => void	Value changed
change	(value: any) => void	Value changed