带有Vuetify.js的Material Design Datetime Picker时间日期插件 – vuetify-datetime-picker

带有Vuetify.js的Material Design Datetime Picker时间日期插件 – vuetify-datetime-picker

插件名称:vuetify-datetime-picker

发布时间:2020年4月29日

插件作者:darrenfang

官网 演示 GitHub下载

vuetify-datetime-picker是一个Vue.js组件,用于基于Vuetify.js框架使用自定义按钮/图标创建漂亮的,材料设计风格的日期和时间选择器。

安装和下载:

# Yarn
$ yarn add vuetify-datetime-picker

# NPM
$ npm install vuetify-datetime-picker --save

使用:

安装并导入vuetify-datetime-picker。

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

初始化插件。

Vue.use(DatetimePicker)

使用日期时间选择器组件。

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

具有默认值的所有props 。

{
  datetime: {
    type: [Date, String],
    default: null
  },
  label: {
    type: String,
    default: ''
  },
  width: {
    type: Number,
    default: 340
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  },
  timePickerFormat: {
    type: String,
    default: '24hr'
  },
  locale: {
    type: String,
    default: 'en-us'
  },
  clearText: {
    type: String,
    default: 'CLEAR'
  },
  okText: {
    type: String,
    default: 'OK'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  errorMessages: {
    type: [String, Array],
    default: () => []
  },
  errorCount: {
    type: [Number, String],
    default: 1
  },
  error: {
    type: Boolean,
    default: false
  },
  hideDetails: {
    type: Boolean,
    default: false
  },
  appendIcon: {
    type: String
  },
  prependIcon: {
    type: String
  }
},
相关插件