DateTimePicker

Combines DatePicker and TimePicker side by side into a single datetime input. The value is in YYYY-MM-DD HH:MM format.

ExamplesCodeUsageChangelog

Basic usage

Schedule event

Select date

Value: none

Tailwind v4

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

<template>
  <DateTimePicker v-model="dt" label="Schedule event" />
</template>

Pre-selected value

Shift start

Jun 10, 2026

Tailwind v4

<!-- dt = '2026-06-10 09:30' -->
<DateTimePicker v-model="dt" label="Shift start" />

Disabled

Locked datetime

Jun 10, 2026

Tailwind v4

<DateTimePicker model-value="2026-06-10 14:00" label="Locked datetime" disabled />

Props

Prop	Type	Default	Description
modelValue	string	—	Datetime in YYYY-MM-DD HH:MM format
label	string	—	Label rendered above the fields
disabled	boolean	false	Disables both the date and time inputs

Emits

Event	Payload	Description
update:modelValue	string	Combined YYYY-MM-DD HH:MM string