Material Design Datetime Picker Plugin With Vuetify.js

vuetify-datetime-picker is a Vue.js component to create a beautiful, Material Design style date & time picker with custom buttons/icons based on the Vuetify.js framework.

See Also:

• 10 Best Date Picker Components For Vue.js/

How to use it:

Install and import the vuetify-datetime-picker.

import DatetimePicker from 'vuetify-datetime-picker'
import 'vuetify-datetime-picker/src/stylus/main.styl'

Initialize the plugin.

Vue.use(DatetimePicker)

Use the Datetime Picker component.

<v-datetime-picker
  label="Select A Datetime"
  v-model="datetime">
</v-datetime-picker>

All props with default values.

{
  datetime: {
    type: [Date, String],
    default: null
  },
  label: {
    type: String,
    default: ''
  },
  width: {
    type: Number,
    default: 340
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  },
  timePickerFormat: {
    type: String,
    default: '24hr'
  },
  locale: {
    type: String,
    default: 'en-us'
  },
  clearText: {
    type: String,
    default: 'CLEAR'
  },
  okText: {
    type: String,
    default: 'OK'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  errorMessages: {
    type: [String, Array],
    default: () => []
  },
  errorCount: {
    type: [Number, String],
    default: 1
  },
  error: {
    type: Boolean,
    default: false
  },
  hideDetails: {
    type: Boolean,
    default: false
  },
  appendIcon: {
    type: String
  },
  prependIcon: {
    type: String
  }
},

Previews:

Date Picker

Time Picker

Download Details:

Author: darrenfang

Live Demo: https://darrenfang.github.io/vuetify-datetime-picker/

Download Link: https://github.com/darrenfang/vuetify-datetime-picker/archive/master.zip

Official Website: https://github.com/darrenfang/vuetify-datetime-picker

Install & Download:

# Yarn
$ yarn add vuetify-datetime-picker

# NPM
$ npm install vuetify-datetime-picker --save