datePicker props

属性	描述	类型	默认值
visible	是否打开datePicker，可通过v-model绑定	boolean	-
cancelText	取消按钮文案	string	取消
confirmText	确认按钮文案	string	确认
title	标题	string	-
type	类型有date（日期），year-month（年月）， time（时间），hour-minute（时分） 可选	string	date
value	选中的value值	date｜array	new Date
minDate	最小日期，或时间	date｜array	当前时间减去40年
maxDate	最大日期，或时间	date｜array	当前时间加30年
formatter	格式化时间	function	(type, val) => val， (type: datePicker的类型， val是原本的值)

datePicker events

名称	描述	参数
cancel	点击取消时触发	-
change	滚轴滚动后触发此事件	columnIndex: 滚动列的下标, itemIndex: 选项的下标
select	点击确认按钮触发此事件	pickerSelectedValue: 所选择选项的value值的集合， pickerSelectedIndex: 所选择选项的下标的集合，pickerSelectedLabel: 所选择选项的label值的集合

例子代码

基础icon

<template>
  <div>
    <div class="items">
      <p class="item_title">日期</p>
      <vill-button title="日期" @click="dateVisibles=true"></vill-button>
    </div>
    <div class="items">
      <p class="item_title">时间</p>
      <vill-button title="时间" @click="timeVisibles=true"></vill-button>
    </div>
    <div class="items">
      <p class="item_title">限制时间范围</p>
      <vill-button title="限制时间范围" @click="timeVisibles2=true"></vill-button>
    </div>
    <vill-date-picker
      v-model="dateVisibles"
      type="date"
      :formatter="datePickerFormatter"
      :minDate="new Date(2008,7,12)"
      :value="new Date(2007, 2, 23)"
      :maxDate="new Date(2021,4,23)"
      @select="handleDatePicker"
    />
    <vill-date-picker
      v-model="timeVisibles"
      type="hour-minute"
      :formatter="datePickerFormatter"
      @select="handleDatePicker"
    />
    <vill-date-picker
      v-model="timeVisibles2"
      type="time"
      :minDate="[12, 12, 12]"
      :maxDate="[22, 22, 22]"
      :value="[19, 19, 19]"
      :formatter="datePickerFormatter"
      @select="handleDatePicker"
    />
  </div>
</template>

<script>
export default {
    data () {
    return {
      dateVisibles: false,
      timeVisibles: false,
      timeVisibles2: false
    }
  },
  methods: {
    handleDatePicker(pickerSelectedValue, pickerSelectedIndex, pickerSelectedLabel) {
      console.log(pickerSelectedValue, pickerSelectedIndex, pickerSelectedLabel)
    },

    datePickerFormatter(type, value) {
      let text = ''
      switch (type) {
        case 'year':
          text = '年'
          break
        case 'month':
          text = '月'
          break
        case 'date':
          text = '日'
          break
        case 'hour':
          text = '时'
          break
        case 'minute':
          text = '分'
          break
        case 'second':
          text = '秒'
          break
      }
      return value + text
    }
  }
}
</script>