Skip to content

darrenfang/vuetify-datetime-picker

Repository files navigation

vuetify-datetime-picker

GitHub license npm version CircleCI

DatetimePicker component for Vuetify.js.

Online Demo

Demo Source Code

Installation

npm install --save vuetify-datetime-picker

or

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

Vue.use(DatetimePicker)

If use the main.styl, you should configure the stylus-loader in webpack.config.js, or just ignore this style sheet.

Usage

Once installed, it can be used in a template as simply as:

<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. See Vuetify Docs
datePickerProps Object Date pickers properties.See Vuetify Docs
timePickerProps Object Time pickers properties.See Vuetify Docs

Events

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

Slots

Name Description
dateIcon Slot to put custom icon in the date tab.
timeIcon Slot to put 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)