DOM Studio

Component

Vue Date Picker Component

<DomDatePicker>

A text date input with a popover calendar picker. Stores YYYY-MM-DD while letting people type dd/mm/yyyy or mm/dd/yyyy.

Playground

Try every prop live

Date picker playground

The text box stores a YYYY-MM-DD value. Pass calendarProps and popoverProps to configure the composed calendar and popover.

June 2026

MonTueWedThuFriSatSun

Type dd/mm/yyyy or pick from the calendar.

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

const data = reactive({
		"modelValue": "2026-06-18",
		"id": "",
		"name": "",
		"label": "Appointment date",
		"description": "Type dd/mm/yyyy or pick from the calendar.",
		"placeholder": "",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field",
		"dateFormat": "dd/mm/yyyy",
		"popoverProps": {
			"position": "bottom-end"
		},
		"calendarProps": {
			"min": "2026-01-01",
			"max": "2026-12-31"
		}
	});
</script>

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

Demo

UK date format

Use dd/mm/yyyy for typed dates while storing the value as YYYY-MM-DD.

June 2026

MonTueWedThuFriSatSun

Type a date or choose one from the calendar.

Stored value: 2026-06-18

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

const date = ref('2026-06-18');
</script>

<template>
	<div class="max-w-sm space-y-4">
		<DomDatePicker
			v-model="date"
			name="booking_date"
			label="Booking date"
			description="Type a date or choose one from the calendar."
			date-format="dd/mm/yyyy"
			:calendar-props="{ min: '2026-01-01', max: '2026-12-31' }"
		/>

		<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">{{ date || 'empty' }}</code>
		</p>
	</div>
</template>

Demo

US date format

Switch to mm/dd/yyyy and en-US calendar labels for US-facing forms.

November 2026

SunMonTueWedThuFriSat

This example parses and displays typed dates as mm/dd/yyyy.

Stored value: 2026-11-24

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

const date = ref('2026-11-24');
</script>

<template>
	<div class="max-w-sm space-y-4">
		<DomDatePicker
			v-model="date"
			name="delivery_date"
			label="Delivery date"
			description="This example parses and displays typed dates as mm/dd/yyyy."
			date-format="mm/dd/yyyy"
			: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">{{ date || 'empty' }}</code>
		</p>
	</div>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
modelValuestringstring''Selected date as YYYY-MM-DD.
dateFormat'dd/mm/yyyy' | 'mm/dd/yyyy'string'dd/mm/yyyy'How typed dates are parsed and displayed.
popoverPropsobjectRecord<string, unknown>{}Props passed to the inner DomPopover. Date picker defaults position to bottom-end, width to w-[20rem], 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 picker.props and inline _edit hints.

Events

NamePayloadDescription
@update:modelValueYYYY-MM-DDFired when a valid date is typed or selected.
@changeYYYY-MM-DDFired when a valid date is committed.
@invalid-datestringFired 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 popover.
  • EnterCommit the typed date when it is valid.
  • EscClose the popover.
  • Arrow keys in calendarMove focus by day or week once the calendar is open.