Vue2使用v-model封装ElementUI日期组件(实现开始时间和结束时间的校验，禁选)

首先看页面效果：

开始时间：

结束时间：

首先当前时间之后的都是禁选，结束时间只能选开始时间之后的和当前时间之前的。

组件代码为：

<!--
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-06-08 15:55:18
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-08-10 17:55:23
-->
<template>
  <div class="inputBox" :style="inputBoxStyle">
    <p class="inputBoxP" :style="titleStyle" v-if="title ? true : false">
      {{ title }}：
    </p>
    <el-date-picker
      :format="format"
      :value-format="valueFormat"
      class="datepicker"
      v-model="dataTime"
      @change="inputFun"
      :clearable="clearable"
      :picker-options="returnpickerOptions"
      :type="type"
      placeholder="选择日期"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "inputFun",
  },
  data() {
    return {
      dataTime: "",
    };
  },
  computed: {
    returnpickerOptions() {
      // 默认等于空的时候  并且是属于结束时间 并且 startTime传入了  说明 是结束时间 
      if (this.pickerOptions === '' && this.end && String(this.startTime)) {
        const timeer = this.startTime
        return {
          disabledDate(time) {
            return new Date(time).getTime() < new Date(timeer).getTime() || time.getTime() > Date.now();
          }
        }
      }
      // 什么也没穿
      if (this.pickerOptions === '') {
        return {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }
      }
      // 传入了 pickerOptions
      console.log(this.pickerOptions, 'this.pickerOptions')
      return this.pickerOptions
    }
  },
  props: {
    // 是否显示取消按钮
    clearable: {
      type: Boolean,
      require: true
    },
    // 输入框前边的文字样式
    titleStyle: {
      type: String,
      require: false,
    },
    // 输入框前边的文字
    title: {
      type: String,
      require: false,
      // default: "请传入Titlt"
    },
    // 文字和输入框父级  可以设置样式
    inputBoxStyle: {
      type: String,
      require: false,
    },
    // v-model 绑定的value值 对应  model: { prop: "value",event: "inputFun",},
    value: {
      type: [Date, String],
      require: false,
    },
    // 输入框默认显示日期
    placeholder: {
      type: String,
      require: false,
      default: "请选择日期",
    },
    // 日期格式化格式
    format: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss",
    },
    // 返回日期格式化格式
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss",
    },
    // 日期组件类型
    type: {
      type: String,
      // 可选 year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange
      default: "datetime",
    },
    // 传入 end  即代表 是结束时间不能大于当前时间  end和startTime一起使用
    end: {
      type: Boolean,
      default: false,
    },
    // 传入 startTime  即代表 是结束时间不能大于当前时间  end和startTime一起使用
    startTime: {
      type: [Date, String],
      required: false,
    },
    // 禁选日期函数 当然也还有很多属性
    pickerOptions: {
      type: [Object, String],
      default: ""
    },
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        this.dataTime = newVal;
      },
      immediate: true,
    },
  },
  methods: {
    inputFun(e) {
      // 触发 v-model 的更新事件  对应  model: { prop: "value",event: "inputFun",},
      this.$emit("inputFun", e);
    },
  },
};
</script>

<style lang="less"  scoped>
.inputBox {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: var(--boxWidth);
  .inputBoxP {
    font-weight: 500;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    width: 150px;
  }
  .inputBoxIpt {
    width: 200px;
  }
  .datepicker {
    width: 200px;
  }
  /deep/.el-input--small .el-input__icon {
    line-height: 28px;
  }
}
</style>

上面写了很多注释，不再赘述。

页面使用：

我这里是全局注册了，所以没再页面单独引入直接使用了。

 <v-date-time-picker
    format="yyyy-MM-dd"
    valueFormat="yyyy-MM-dd"
    type="date"
    title="开始时间"
    v-model="startTime"
  />
  <v-date-time-picker
    end
    :startTime="startTime"
    format="yyyy-MM-dd"
    valueFormat="yyyy-MM-dd"
    type="date"
    title="结束时间"
    v-model="endTime"
  />

当然目前在处理pickerOptions的时候如果使用了pickerOptions属性那么就是按照传入的，如果没有传入，就是默认的，就比如说是开始时间，如果end和startTime出入了，就相当于是结束时间的展示。

如果不知道v-model怎么封装可以看这篇文章：
1、Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
还有其他两篇例子：
1、Vue2使用v-model封装ElementUI_Input组件
2、Vue2使用v-model封装ElementUI_CheckBox组件