vc-popup-datetime-picker

vc-popup-datetime-picker

Usage no npm install needed!

<script type="module">
  import vcPopupDatetimePicker from 'https://cdn.skypack.dev/vc-popup-datetime-picker';
</script>

README

vc-popup-datetime-picker

日期选择器, picker的定制~

添加依赖

> yarn add vc-popup-datetime-picker || npm i vc-popup-datetime-picker || cnpm i vc-popup-datetime-picker --by=yarn

引入

import Vue from 'vue'
import VcPopupDatetimePicker from 'vc-popup-datetime-picker'
// 这里名字可以随意

Vue.use(VcPopupDatetimePicker)

在具体页面中使用

this.datetimePicker = new this.$popup.DatetimePicker({
  ...config
  propsData: {}
})

this.datetimePicker.open(e, {
  ...config
  propsData: {}
})

this.datetimePicker.close()

e为事件Event, 比如click时候取得的evt, 与一些定位方法相关 config可参考popup-base/readme.md

propsData配置定义

{
  e:              Object    // 从open(e, {})传进来的e
  onChange:       Function, // 当选择发生改变的时候触发
  showItemNum:    Number,   // 奇数, 显示一列有多少个行选项, 一般是3,5,7
  defaultValues:  Array,    // 默认值
  showItemHeight: Number,   // 没行的高度

  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  onConfirm: Function,
  onCancel: Function,

  mode: {
    type: String,
    default: 'datetime'
  },
  minDate: {
    type: Date,
    default () {
      var now = new Date()
      now.setFullYear(now.getFullYear() - 10)
      return now
    }
  },
  maxDate: {
    type: Date,
    default () {
      var now = new Date()
      now.setFullYear(now.getFullYear() + 10)
      return now
    }
  },
  use12Hours: {
    type: Boolean,
    default: true
  },
  minuteStep: {
    type: Number,
    default: 1
  },
  showUnit: {
    type: Boolean,
    default: true
  },
  showDivider: {
    type: Boolean,
    default: false
  },

  customUnits: {
    type: Object,
    example: {
      Y: '年',
      M: '月',
      D: '日',
      h: '时',
      m: '分',
      s: '秒',
      am: '上午',
      pm: '下午'
    }
  }
}

效果预览

License

MIT 一起来扣细节~