【ElenmentUI el-date-picker日期选择器，结束时间不得早于开始时间，且只能选择距开始时间指定天数的日期】

 场景：

1、开始时间不得晚于结束时间；结束时间不得早于开始时间；

2、开始时间与结束时间之间，有可选择的天数间隔，只可选择间隔日期内的日期；

例如：设置间隔时间为5天；日期的取值范围，如下：

2022-05-26 00:00:00——2022-05-30 23:59:59

2022-05-26 10:00:00——2022-05-31 10:00:00

效果：

 

 

 完整代码：

<template>
  <div>
    <el-button @click="dialogVisible = true">打开</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="开始时间" prop="start">
          <el-date-picker
            type="datetime"
            placeholder="请输入开始时间"
            v-model="form.start"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="ksTime"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end">
          <el-date-picker
            type="datetime"
            placeholder="请输入结束时间"
            v-model="form.end"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerEndOptions"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onsubmit('form')">确 定</el-button>
        <el-button @click="close('form')">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  watch: {
    'form.end':{
      handler(newValue, oldValue) {
        if(newValue && this.form.start){
          const st = this.form.start.split(' ')[1];
          //检测两个日期是否为同一天
          const datesAreOnSameDay = (first, second) =>
            first.getFullYear() === second.getFullYear() &&
            first.getMonth() === second.getMonth() &&
            first.getDate() === second.getDate();

          // 1、如果是同一天的话，时间不能早于开始时间；
          // 2、如果是最后一天的话，时间不能晚于开始时间；
          if(datesAreOnSameDay(new Date(newValue), new Date(this.form.start))){
            this.pickerEndOptions.selectableRange = [`${st} - 23:59:59`];
          }else if(datesAreOnSameDay(new Date(new Date(this.form.start).getTime()+1000*60*60*24*this.optionalDate), new Date(newValue))){
            this.pickerEndOptions.selectableRange = [`00:00:00 - ${st}`];
          }else{
            this.pickerEndOptions.selectableRange = [`00:00:00 - 23:59:59`];
          }
        }
      }
    } 
  },
  data() {
    return {
      // 间隔天数
      optionalDate:5,
      // 日期限制
      pickerEndOptions: {
        disabledDate: (time) => {
          if (this.form.start) {
            const st = this.form.start.split(' ')[1];
            let dateTime = new Date(this.form.start);
            let startDateTime = dateTime.setDate(dateTime.getDate() - (st=='00:00:00'? 0: 1));
            let endDateTime = dateTime.setDate(dateTime.getDate() + (st=='00:00:00'?this.optionalDate-1:this.optionalDate+1));
            
            return (
              time.getTime() < new Date(startDateTime).getTime() ||
              time.getTime() > new Date(endDateTime).getTime()
            );
          }
        },
        // 限制时间
        selectableRange: []
      },
      dialogVisible: false,
      form: {
        start: "",
        end: "",
      },
      rules: {
        start: [
          {
            required: true,
            message: "开始时间不能为空",
            trigger: ["blur", "change"],
          },
        ],
        end: [
          {
            required: true,
            message: "结束时间不能为空",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    // 选择开始日期
    ksTime(){
      this.form.start && (this.form.end = '')
    },
    // 关闭弹窗的二次确认
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.close('form');
          done();
        })
        .catch((_) => {});
    },
    // 提交
    onsubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log({ ...this.form });
          this.close(formName);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 关闭
    close(formName) {
      // 重置表单
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
      this.dialogVisible = false;
    },
  }
};
</script>

<style scoped>
</style>