vue-datetime

Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and disabling dates.

Installation

yarn add luxon vue-datetime weekstart

npm install --save luxon vue-datetime weekstart

Register

import Vue from 'vue'
import Datetime from 'vue-datetime'
// You need a specific loader for CSS files
import 'vue-datetime/dist/vue-datetime.css'

Vue.use(Datetime)

Register manually

Global

import { Datetime } from 'vue-datetime';

Vue.component('datetime', Datetime);

Local

import { Datetime } from 'vue-datetime';

Vue.extend({
  template: '...',
  components: {
    datetime: Datetime
  }
});

Usage

Minimal

<datetime v-model="date"></datetime>

Custom

You can customize the component output using named slots and component props.

<datetime v-model="date" input-id="startDate">
  <label for="startDate" slot="before">Field Label</label>
  <span class="description" slot="after">The field description</span>
</datetime>