vue-datepicker-z v2.3.3

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>

属性

事件

方法