Vuetify Simple DateTime Input

A lightweight date + time picker component built on Vuetify 4 and Vue 3. Provides a combined date & time selection experience in a single, clean input — filling the gap where Vuetify doesn't ship an official datetime picker.

Live demo & documentation →

Features

• Date picker — uses Vuetify's v-date-picker
• Time picker — hour & minute v-select dropdowns, 12h or 24h, with configurable minuteStep
• v-model support — binds to a Date | null
• Vuetify-native — respects your Vuetify theme, density, and variant props
• Min / max date constraints, including full datetime bounds
• minTime / maxTime — restrict selectable times of day (e.g. business hours) on every date
• Clearable — one-click reset
• Simple layout — date picker on top, hour:minute below, Cancel/OK actions
• Accessible — error messages, hints, $attrs forwarding

Installation

npm install vuetify-simple-datetime-input

Peer dependencies: vue ^3.3, vuetify ^4.0, @mdi/font ^7.0

Quick Start

Global Registration (Plugin)

import { createApp } from 'vue';
import { createVuetify } from 'vuetify';
import VuetifySimpleDateTimeInputPlugin from 'vuetify-simple-datetime-input';
import 'vuetify/styles';
import 'vuetify-simple-datetime-input/dist/style.css';

const app = createApp(App);
app.use(createVuetify());
app.use(VuetifySimpleDateTimeInputPlugin);
app.mount('#app');

Then in any template:

<VuetifySimpleDateTimeInput v-model="myDate" />

Local / Tree-shaken Import

import { VuetifySimpleDateTimeInput } from 'vuetify-simple-datetime-input';

Props

Prop	Type	Default	Description
modelValue	Date | string | null	null	Bound value (v-model)
label	string	"Date & Time"	Text field label
variant	"outlined" | "filled" | "underlined" | "solo" | "plain"	"outlined"	Vuetify field variant
density	"default" | "comfortable" | "compact"	"default"	Field density
clearable	boolean	true	Show clear (×) button
disabled	boolean	false	Disable the field
use24h	boolean	false	Use 24-hour format instead of AM/PM
min	string | Date | null	undefined	Earliest selectable date. Pass a full ISO datetime (e.g. 2026-07-05T09:00) to also bound the time-of-day on that day
max	string | Date | null	undefined	Latest selectable date. Pass a full ISO datetime to also bound the time-of-day on that day
minTime	string ("HH:mm")	undefined	Earliest selectable time of day, applied every day — e.g. "09:00" for business hours
maxTime	string ("HH:mm")	undefined	Latest selectable time of day, applied every day — e.g. "17:30" for business hours
firstDayOfWeek	number	0	First day of week (0 = Sunday, 1 = Monday)
minuteStep	number	1	Restricts minute selection to multiples of this step, e.g. 5 or 10, for quick slot picking
hint	string	undefined	Hint text below the field
errorMessages	string | string[]	undefined	Error messages to display

Events

Event	Payload	Description
update:modelValue	Date | null	Emitted when value changes

Slots & $attrs

The v-text-field uses v-bind="{ ...activatorProps, ...$attrs }", so any extra attributes you pass (e.g. prepend-icon, append-inner-icon, class, style) are forwarded directly to the underlying text field.

Development

# Install dependencies
npm install

# Start dev playground
npm run dev

# Build library
npm run build

License

MIT