1.el-date-picker时间选择框开始时间和结束时间校验

需求： 有两个时间选择框,一个是开始时间,一个是结束时间，要求结束时间一定要大于开始时间。

思路：利用 el-date-picker 组件的 picker-options 属性,值是一个对象,里面有一个属性 disabledDate ,值是一个函数,参数时当前选择时间,可以设置禁用日期。

<template>
  <div>
    <span>开始时间:</span>
    <el-date-picker
      v-model="templateInfo.startTime"
      type="date"
      placeholder="选择日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptionsStart"
    >
    </el-date-picker>
    <span>结束时间:</span>
    <el-date-picker
      v-model="templateInfo.endTime"
      type="date"
      placeholder="选择日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptionsEnd"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  props: ["addTempDialogVisible"],
  data() {
    return {
      // 表单信息
      templateInfo: {
        startTime: "",
        endTime: "",
      },
      // 开始时间校验
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (
            this.templateInfo.endTime == null ||
            this.templateInfo.endTime == undefined
          ) {
            return false;
          } else if (
            new Date(time).getTime() >=
            new Date(this.templateInfo.endTime).getTime()
          ) {
            return time.getTime();
          }
        },
      },
      // 结束时间校验
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (
            new Date(time).getTime() <=
            new Date(this.templateInfo.startTime).getTime()
          ) {
            return time.getTime();
          }
        },
      },
    };
  },
};
</script>
<style lang="scss" scoped></style>