vuetify2-datetime-picker

DatetimePicker component for Vuetify.js ver 2.X.X

Installation

npm install --save vuetify2-datetime-picker

or

yarn add vuetify2-datetime-picker

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

Vue.use(DatetimePicker)

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. | | label | string | | Sets input label. | | width | Number | 320 | The width of the content. | | format | string | YYYY-MM-DD HH:mm:ss | Defines the format of a datetime displayed in field. | | timePickerFormat | string | 24hr | Defines the format of a time displayed in picker. Available options are ampm and 24hr. | | locale | string | en-us | Sets the locale. Accepts a string with a BCP 47 language tag. | | okText | string | OK | Sets the text of the ok button. | | clearText | string | CLEAR | Sets the text of the clear button. | | loading | Boolean | false | see Vuetify Docs | | errorMessages | String/Array | | see Vuetify Docs | | errorCount | Number/String | 1 | see Vuetify Docs | | error | Boolean | false | see Vuetify Docs | | hideDetails | Boolean | false | see Vuetify Docs | | appendIcon | String | | see Vuetify Docs | | prependIcon | String | | 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. |