Mobile-friendly Datetime Picker for Vue 2

Common errors

• [Vue warn]: Unknown custom element: <datetime> - did you register the component correctly?

  cause The `Datetime` component was not registered globally via `Vue.use()` or locally in the `components` option of a Vue component.
  fix Register `Datetime` globally with `Vue.use(Datetime)` after importing it, or locally within your component's `components` option: `components: { Datetime }`.

• Module not found: Error: Can't resolve 'luxon' in '...'

  cause The `luxon` peer dependency, required by `vue-datetime` for date manipulation, is missing from your project's `node_modules`.
  fix Install `luxon` as a project dependency: `npm install luxon` or `yarn add luxon`.

Warnings

• breaking The package is currently in a beta state (1.0.0-beta.14). API contracts, configuration options, and internal behavior are subject to change without major version bumps until a stable 1.0 release is made. Users should expect potential breaking changes between beta versions.
  Fix: Refer to the release notes for each beta version and update your code accordingly. Monitor the GitHub repository for updates and future stable releases.
• gotcha This component has peer dependencies on `luxon` (for date handling) and `vue` (the framework itself). While `weekstart` is also a peer dependency, it's optional; `vue-datetime` will auto-detect the week's start day from the locale if `weekstart` is not provided. Failure to install `luxon` will result in runtime errors.
  Fix: Ensure `luxon` and `vue` are installed in your project: `npm install luxon vue` or `yarn add luxon vue`.
• gotcha The component's default styling requires an explicit CSS import: `import 'vue-datetime/dist/vue-datetime.css'`. Without this, the picker will appear unstyled and potentially non-functional visually.
  Fix: Add `import 'vue-datetime/dist/vue-datetime.css'` to your main application entry file or component where `vue-datetime` is used.
• gotcha The `v-model` property expects an ISO 8601 formatted string (e.g., `'2026-04-19T10:00:00.000Z'`). Providing other date formats might lead to unexpected behavior, parsing errors, or the picker not displaying the value correctly.
  Fix: Ensure your `v-model` bound data is always an ISO 8601 string. Use Luxon's `toUTC().toISO()` or similar methods for conversion if necessary.

Install

• npm install vue-datetime npm
• yarn add vue-datetime yarn
• pnpm add vue-datetime pnpm

Imports

• Datetime
  wrong:

  import Datetime from 'vue-datetime'

  correct:

  import { Datetime } from 'vue-datetime'

  The main component, exported as a named export. Typically registered globally with `Vue.use(Datetime)` or locally within a Vue component's `components` option.
• CSS styles

  import 'vue-datetime/dist/vue-datetime.css'

  Essential for the component's visual appearance and proper rendering. Must be imported separately from the JavaScript component.
• Vue.use(Datetime)
  wrong:

  import { use } from 'vue'; use(Datetime);

  correct:

  import Vue from 'vue';
  import { Datetime } from 'vue-datetime';
  Vue.use(Datetime);

  Registers the `<datetime>` component globally across your Vue application. For local component registration, add `datetime: Datetime` to your component's `components` option.

Quickstart

This quickstart demonstrates how to install, globally register, and use the `vue-datetime` component in a basic Vue 2 application with `v-model` binding for both datetime and date modes.

<template>
  <div id="app">
    <h1>Vue Datetime Picker Demo</h1>
    <datetime v-model="selectedDate" type="datetime" input-id="my-datetime-picker"></datetime>
    <p>Selected Datetime (ISO 8601): <strong>{{ selectedDate }}</strong></p>
    <p>Using type="date":</p>
    <datetime v-model="selectedDateOnly" type="date"></datetime>
    <p>Selected Date: <strong>{{ selectedDateOnly }}</strong></p>
  </div>
</template>

<script>
import Vue from 'vue';
import { Datetime } from 'vue-datetime';
import 'vue-datetime/dist/vue-datetime.css';

// Luxon is a peer dependency but doesn't need to be imported directly here.
// Ensure it's installed: npm install luxon

// Register the component globally
Vue.use(Datetime);

export default {
  name: 'App',
  data() {
    return {
      selectedDate: new Date().toISOString(), // Initialize with current ISO string
      selectedDateOnly: new Date().toISOString().split('T')[0] + 'T00:00:00.000Z'
    };
  }
};
</script>

<style>
body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: #f8f8f8;
}
h1 {
  color: #333;
  margin-bottom: 20px;
}
p {
  margin-top: 15px;
  font-size: 1.1em;
}
strong {
  color: #007bff;
}
/* Basic styling for the picker input */
#my-datetime-picker {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  width: 250px;
  margin-bottom: 20px;
}
</style>