Press "Enter" to skip to content

Material Design Datetime Picker Component Plugin for Vuetify.js

vuetify-datetime picker is a component of Vue.js to create a beautiful material design style date and time picker with custom buttons/icons based on the Vuetify.js framework.

material uipickers, material time picker android, date time picker, date range picker material ui, material ui time picker 24 hours

How to make use of it:


npm install --save vuetify-datetime-picker


yarn add vuetify-datetime-picker


import Vue from 'vue'
import DatetimePicker from 'vuetify-datetime-picker'
// (Optional) import 'vuetify-datetime-picker/src/stylus/main.styl'

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


NameTypeDefault ValueDescription
datetime (model)Date/String Time picker model.
disabledBooleanfalseInput is disabled.
loadingBooleanfalseInput is loading.
labelstring Sets input label.
dialogWidthNumber340The width of the dialog.
dateFormatstringyyyy-MM-ddDefines the format of a date.
timeFormatstringHH:mmDefines the format of a time.
clearTextstringCLEARSets the text of the clear button.
okTextstringOKSets the text of the ok button.
textFieldPropsObject Text fields properties.
datePickerPropsObject Date pickers properties.
timePickerPropsObject Time pickers properties.


inputvalue (Date/String)The updated bound model


dateIconSlot to put a custom icon in the date tab.
timeIconSlot to put a custom icon in the time tab.
actionsSlot to put custom buttons in the dialog.
progressSlot for custom progress linear (displayed when loading prop is not equal to Boolean False)
material design datetimepicker, vuetify-datetime-picker Plugin/Github

See Demo And Download

Official Website(darrenfang): Click Here

This superior jQuery/javascript plugin is developed by darrenfang. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.