简单干净的日期和时间选择器– vue-datepicker

简单干净的日期和时间选择器– vue-datepicker
插件名称 vue-datepicker
版本号 v4.0.3
发布时间 2020年5月13日
插件作者 livelybone

一个简单的干净的日期和时间选择器库,可在Vue.js应用程序上创建日期选择器,时间选择器和日期时间选择器。

变更日志:

v4.0.3(03/15/2020)

  • fix(DatePin):类型为十年时,不应调用triggerAfterClickEvent

v4.0.2(07/09/2020)

  • 修复:typeof占位符,minTime,maxTime

安装和下载:

# NPM
$ npm install @livelybone/vue-datepicker --save

如何使用它:

1.导入,安装和注册vue-datepicker。

// 导入模块
import {Datepicker, Timepicker, DatetimePicker} from '@livelybone/vue-datepicker';
// 或
import * as VueDatepicker from '@livelybone/vue-datepicker';
// 全局
Vue.component('datepicker', Datepicker);
Vue.component('timepicker', Timepicker);
Vue.component('datetime-picker', DatetimePicker);
// 本机
new Vue({
  components:{Datepicker, Timepicker, DatetimePicker}
})

2.创建一个日期选择器。

new Vue({
  el: '#datepicker',
  template: '<datepicker :value="date" @input="log" min="2018-6-1" max="2020-01-01" :dayStr="dayStr" :popperProps="popperProps" :scrollbarProps="{isMobile:isM}"/>',
  data: function () {
    return {
      dayStr: ['7', '1', '2', '3', '4', '5', '6'],
      date: '2018-06-01',
      popperProps: popperProps,
    }
  },
  methods: {
    log: function (val) {
      this.date = val
      console.log(val)
    },
  },
  components: { 'datepicker': VueDatepicker.Datepicker },
})

3.创建一个时间选择器。

new Vue({
  el: '#timepicker',
  template: '<timepicker :value="time" @input="log" min="02:10:02" max="22:10:00" :timeStr="timeStr" :scrollbarProps="{isMobile:isM}" :popperProps="popperProps"/>',
  data: function () {
    return {
      timeStr: ['hour', 'min', 'sec'],
      time: '03:02:01',
      isM: isM,
      popperProps: popperProps,
    }
  },
  methods: {
    log: function (val) {
      this.time = val
      console.log(val)
    },
  },
  components: { 'timepicker': VueDatepicker.Timepicker },
})

4.创建一个日期时间选择器。

new Vue({
  el: '#datetime-picker',
  template: '<datetime-picker :value="time" @input="log" min="2018-08-24 02:10:02" max="2020-09-1 22:10:00" :timeStr="timeStr" :scrollbarProps="{isMobile:isM}" :popperProps="popperProps"/>',
  data: function () {
    console.log('datetime-picker')
    return {
      timeStr: ['hour', 'min', 'sec'],
      time: '2019-02-01 01:02:01',
      isM: isM,
      popperProps: popperProps,
    }
  },
  methods: {
    log: function (val) {
      this.time = val
      console.log(val)
    },
  },
  components: { 'datetime-picker': VueDatepicker.DatetimePicker },
})