1.0.0-alpha.3 • Published 6 years ago
vuetify2-datetime-picker v1.0.0-alpha.3
vuetify2-datetime-picker
DatetimePicker component for Vuetify.js ver 2.X.X
Installation
npm install --save vuetify2-datetime-picker
or
yarn add vuetify2-datetime-pickerimport 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. |