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()显示日历