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