封装element 时间日期选择组件——两个时间面板、后面的日期不大于前面的日期

1、在封装的公共组件里面写入：

timer_slector.vue

<template>
   <span class="time-slelector">
      <el-date-picker
         v-model="vModel[0]"
         :type="type"
         :picker-options="pickerBeginDateBefore"
         :style="styleCss"
         :value-format="valueFormat"
         :format="format"
         :placeholder="startPlaceholder"
         :clearable="clearable"
         :editable="editable"
      ></el-date-picker
      >{{ rangeSeparator
      }}<el-date-picker
         v-model="vModel[1]"
         :type="type"
         :picker-options="pickerBeginDateAfter"
         :style="styleCss"
         :value-format="valueFormat"
         :format="format"
         :placeholder="endPlaceholder"
         :clearable="clearable"
         :editable="editable"
      ></el-date-picker>
   </span>
</template>

<script>
export default {
   props: {
      vModel: {
         type: Array,
         default: []
      },
      startPlaceholder: {
         type: String,
         default: ""
      },
      endPlaceholder: {
         type: String,
         default: ""
      },
      rangeSeparator: {
         type: String,
         default: ""
      },
      clearable: {
         type: Boolean,
         default: true
      },
      editable: {
         type: Boolean,
         default: true
      },
      type: {
         type: String,
         default: "date"
      },
      valueFormat: {
         type: String,
         default: "yyyy-MM-dd"
      },
      styleCss: {
         type: String,
         default: "width:150px;"
      },
      format: {
         type: String,
         default: "yyyy-MM-dd"
      }
   },
   data() {
      return {
         pickerBeginDateBefore: {
            disabledDate: time => {
               if (this.vModel[1]) {
                  let hm = new Date(this.vModel[1].substr(0, 10) + " 23:59:59").getTime() - new Date(this.vModel[1]).getTime();
                  let endDT = new Date(this.vModel[1]).getTime() + hm;
                  if (endDT) {
                     return time.getTime() > endDT;
                  }
               }
            }
         },
         pickerBeginDateAfter: {
            disabledDate: time => {
               if (this.vModel[0]) {
                  let hm = new Date(this.vModel[0]).getTime() - new Date(this.vModel[0].substr(0, 10) + " 00:00:00").getTime();
                  let beginDT = new Date(this.vModel[0]).getTime() - hm;
                  if (beginDT) {
                     return time.getTime() < beginDT;
                  }
               }
            }
         }
      };
   }
};
</script>

<style lang="less" scoped>
.time-slelector {
   color: #000;
}
</style>

2、在需要的页面引入：

<template>
   <div>
      <div class="timer">
         <timerSlector></timerSlector>
      </div>
   </div>
</template>

<script>
import timerSlector from "../components/timer_slector.vue";
</script>