Material Design Datetime Picker Component Plugin for Vuetify.js

By webcodeflow

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:

Installation

npm install --save vuetify-datetime-picker

or

yarn add vuetify-datetime-picker

Usage

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

Vue.use(DatetimePicker)

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

Properties

Name	Type	Default Value	Description
datetime (model)	Date/String		Time picker model.
disabled	Boolean	false	Input is disabled.
loading	Boolean	false	Input is loading.
label	string		Sets input label.
dialogWidth	Number	340	The width of the dialog.
dateFormat	string	yyyy-MM-dd	Defines the format of a date.
timeFormat	string	HH:mm	Defines the format of a time.
clearText	string	CLEAR	Sets the text of the clear button.
okText	string	OK	Sets the text of the ok button.
textFieldProps	Object		Text fields properties.
datePickerProps	Object		Date pickers properties.
timePickerProps	Object		Time pickers properties.

Events

Name	Arguments	Description
input	value (Date/String)	The updated bound model

Slots

Name	Description
dateIcon	Slot to put a custom icon in the date tab.
timeIcon	Slot to put a custom icon in the time tab.
actions	Slot to put custom buttons in the dialog.
progress	Slot for custom progress linear (displayed when loading prop is not equal to Boolean False)