DOM Studio

Component

Vue Date and Time Picker

<DomDateTimePicker>

A typed date and time input with a popover calendar and time selector. Stores a local YYYY-MM-DDTHH:mm value.

Playground

Try every prop live

Date time picker playground

The input stores a local YYYY-MM-DDTHH:mm value. Calendar props configure the date grid; time props configure generated times.

June 2026

MonTueWedThuFriSatSun

Time

09:30

Type dd/mm/yyyy plus a time, or choose both from the popover.

Playground.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomDateTimePicker } from '@getdom/studio';

const data = reactive({
		"modelValue": "2026-06-18T09:30",
		"id": "",
		"name": "",
		"label": "Appointment",
		"description": "Type dd/mm/yyyy plus a time, or choose both from the popover.",
		"placeholder": "",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field",
		"dateFormat": "dd/mm/yyyy",
		"timeFormat": "24h",
		"minuteStep": 15,
		"defaultTime": "09:00",
		"min": "2026-06-01T08:00",
		"max": "2026-06-30T18:00",
		"timeOptions": [],
		"showSeconds": false,
		"popoverProps": {},
		"calendarProps": {
			"min": "2026-06-01",
			"max": "2026-06-30"
		}
	});
</script>

<template>
	<DomDateTimePicker
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Appointment date and time

Combine a calendar date with generated time slots, then store a local ISO-like date-time string.

June 2026

MonTueWedThuFriSatSun

Time

09:30

Type a date and time or choose both from the popover.

Stored value: 2026-06-18T09:30

AppointmentDateTime.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomDateTimePicker } from '@getdom/studio';

const dateTime = ref('2026-06-18T09:30');
</script>

<template>
	<div class="max-w-sm space-y-4">
		<DomDateTimePicker
			v-model="dateTime"
			name="appointment_at"
			label="Appointment"
			description="Type a date and time or choose both from the popover."
			date-format="dd/mm/yyyy"
			:minute-step="15"
			min="2026-06-01T08:00"
			max="2026-06-30T18:00"
			:calendar-props="{ min: '2026-06-01', max: '2026-06-30' }"
		/>

		<p class="rounded-xl border border-border bg-secondary px-3 py-2 text-sm text-muted-fg">
			Stored value:
			<code class="font-mono text-canvas-fg">{{ dateTime || 'empty' }}</code>
		</p>
	</div>
</template>

Demo

US date and 12-hour time

Use mm/dd/yyyy parsing and 12-hour time labels while keeping the stored value canonical.

November 2026

SunMonTueWedThuFriSat

Time

2:30 PM

Use US date parsing and 12-hour time labels.

Stored value: 2026-11-24T14:30

UsDateTime.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomDateTimePicker } from '@getdom/studio';

const dateTime = ref('2026-11-24T14:30');
</script>

<template>
	<div class="max-w-sm space-y-4">
		<DomDateTimePicker
			v-model="dateTime"
			name="delivery_at"
			label="Delivery window"
			description="Use US date parsing and 12-hour time labels."
			date-format="mm/dd/yyyy"
			time-format="12h"
			:minute-step="30"
			:calendar-props="{ locale: 'en-US', weekStartsOn: 0 }"
		/>

		<p class="rounded-xl border border-border bg-secondary px-3 py-2 text-sm text-muted-fg">
			Stored value:
			<code class="font-mono text-canvas-fg">{{ dateTime || 'empty' }}</code>
		</p>
	</div>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
modelValuestringstring''Selected date and time as YYYY-MM-DDTHH:mm, or YYYY-MM-DDTHH:mm:ss when showSeconds is enabled.
dateFormat'dd/mm/yyyy' | 'mm/dd/yyyy'string'dd/mm/yyyy'How typed dates are parsed and displayed.
timeFormat'24h' | '12h'string'24h'How times are displayed in the input and option list.
minuteStepnumbernumber15Minute interval used to generate time options.
defaultTimestringstring'09:00'Time used when a date is selected before the user has chosen a time.
minstringstring''Minimum selectable date-time as YYYY-MM-DDTHH:mm.
maxstringstring''Maximum selectable date-time as YYYY-MM-DDTHH:mm.
timeOptions
ts
[
	{
		value: "09:30",
		label: "9:30 AM",
		disabled: false,
	}
]
arrayArray<TimeOptionsItem
type TimeOptionsItem = {
	value?: string; // Value
	label?: string; // Label
	disabled?: boolean; // Disabled
};
>		[]Optional custom time options. Use strings such as 09:30 or records with value, label, and disabled.
showSecondsbooleanbooleanfalseStore and display seconds in addition to hours and minutes.
popoverPropsobjectRecord<string, unknown>{}Props passed to the inner DomPopover. Date time picker defaults position to bottom-end, max width to 34rem, padding to p-0, and arrow to true.
calendarPropsobjectRecord<string, unknown>{}Props passed to the inner DomCalendar, such as locale, weekStartsOn, min, max, fixedWeeks, and showAdjacentDays.

Field props

NameTypeTSDefaultDescription
idstringstring''Optional ID override. By default parent forms derive the input ID from the field path using underscores.
namestringstring''Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
labelstringstring''Visible field label.
descriptionstringstring''Optional helper copy below the field.
placeholderstringstring''Placeholder shown when the control is empty.
requiredbooleanbooleanfalseMark the field as required.
disabledbooleanbooleanfalseDisable field interaction.
readOnlybooleanbooleanfalseShow the value but prevent editing.
invalidbooleanbooleanfalseMark the field invalid.
errors
ts
[
	{
		name: "Validation name",
		message: "Error message",
	}
]
array | object | stringArray<ErrorsItem
type ErrorsItem = {
	name?: string; // Name
	message?: string; // Message
};
>		[]Validation errors for this field.
visiblebooleanbooleantrueShow or hide the field.
validatorsarrayArray<unknown>[]Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
validateOnBlurbooleanbooleantrueRun validators when the field loses focus.
chrome'field' | 'none' | falsestring'field'Render default field chrome, or hide chrome while keeping form state wiring.

Auto-generated from Date time picker.props and inline _edit hints.

Events

NamePayloadDescription
@update:modelValueYYYY-MM-DDTHH:mmFired when a valid date-time is typed or selected.
@changeYYYY-MM-DDTHH:mmFired when a valid date-time is committed.
@invalid-date-timestringFired when typed text cannot be parsed or is outside the allowed range.
@focusFocusEventFired when the text input receives focus.
@blurFocusEventFired when the text input loses focus.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Keyboard

  • Alt + ArrowDownOpen the calendar and time popover.
  • EnterCommit the typed date-time when it is valid.
  • EscClose the popover.
  • Arrow keys in calendarMove focus by day or week once the calendar is open.
  • TabMove through generated time options.