vue-date-picker-z

a vue component of calendar

移动端PC端日期选择器（>=vue2.0）

使用方法

npm安装

npm install vue-date-picker-z

import DatePicker from 'vue-date-picker-z'
Vue.use(DatePicker);

Quickstart

<template>
   <p>对于pc端的在点击时间上增加.stop</p>
   <input class="date-ipt" @click.stop="show_date" v-model="date_demo" readonly>
  <div class="date-time-item">
      <input class="date-ipt" @click="show_date" v-model="date_demo" readonly>
      <date-picker
          ref="datePicker"
          type="dateTime"
          :defaultDate="date_demo"
          :min="minDate"
          :max="maxDate"
          @confirm="confirmDate"
      ></date-picker>
  </div>
</template>

<script>
export default {
  data() {
          return {
              date_demo: "",
              minDate: "",
              maxDate: ""
          };
      },
      components: {
          DatePicker
      },
      methods: {
          show_date(ev) {//
                // 对于pc端需要而且一定要传点击事件
                this.$refs.datePicker.hideDatePicker();
                var _self = this;
                setTimeout(()=> {
                    this.$refs.datePicker.show(ev);
                },50);

                this.$refs.datePicker.show(); // 移动端直接调用
          },
          confirmDate(date) {
              this.date_demo = date;
          }
      }
};

</script>

属性

名称	类型	默认值	说明
defaultDate	String	-	日期
type	String	'dateTime'	年月日时分选择模式（默认），date:年月日选择模式；time:时间段选择模式
color	String	-	背景及文字颜色(默认"#417df4")
min	String	-	最小值
max	String	-	最大值

事件

名称	说明	回调
confirm	当前所选日期确定	回调参数为当前所选日期

方法

名称	说明	默认值
show	通过this.$refs.datePicker.show()显示日历