[elementui El date picker date selector, the end time must not be earlier than the start time, and only the date of the specified number of days from the start time can be selected]

  scene ：

1、 Starting time No later than End time ; End time Not earlier than Starting time ;

2、 Between start time and end time , There are options Interval of days , Only dates within the interval date can be selected ;

for example ： Set the interval to 5 God ; Value range of date , as follows ：

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

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

effect ：

  Complete code ：

<template>
  <div>
    <el-button @click="dialogVisible = true"> open </el-button>
    <el-dialog
      title=" Tips "
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label=" Starting time " prop="start">
          <el-date-picker
            type="datetime"
            placeholder=" Please enter the start time "
            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=" End time " prop="end">
          <el-date-picker
            type="datetime"
            placeholder=" Please enter the end time "
            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')"> indeed   set </el-button>
        <el-button @click="close('form')"> take   eliminate </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];
          // Check whether the two dates are the same 
          const datesAreOnSameDay = (first, second) =>
            first.getFullYear() === second.getFullYear() &&
            first.getMonth() === second.getMonth() &&
            first.getDate() === second.getDate();

          // 1、 If it's the same day , The time cannot be earlier than the start time ;
          // 2、 If it's the last day , The time cannot be later than the start time ;
          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 {
      //  Days between 
      optionalDate:5,
      //  Date limit 
      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()
            );
          }
        },
        //  Time limit 
        selectableRange: []
      },
      dialogVisible: false,
      form: {
        start: "",
        end: "",
      },
      rules: {
        start: [
          {
            required: true,
            message: " Start time cannot be empty ",
            trigger: ["blur", "change"],
          },
        ],
        end: [
          {
            required: true,
            message: " End time cannot be empty ",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    //  Choose a start date 
    ksTime(){
      this.form.start && (this.form.end = '')
    },
    //  Close the pop-up window for secondary confirmation 
    handleClose(done) {
      this.$confirm(" Confirm close ？")
        .then((_) => {
          this.close('form');
          done();
        })
        .catch((_) => {});
    },
    //  Submit 
    onsubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log({ ...this.form });
          this.close(formName);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //  close 
    close(formName) {
      //  Reset form 
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
      this.dialogVisible = false;
    },
  }
};
</script>

<style scoped>
</style>