el-date-picker设置起止时间间隔与setDate方法

背景

在对时间进行选择时，可能会因为选择的时间范围过大，导致数据量过大从而造成性能和视觉上的体验不佳。解决这个问题，设置可选择的时间的最大间隔，并且在超过间隔时将结束时间改为范围内的日期。

解决方法

步骤

1.将日期字符串转化为Date对象，计算起止时间的时间差（此例子中为31天）

2.注意:单位是毫秒，记得切换为天数

3.如果超出最大天数，则将结束时间设置为起始时间+30天

易错点

setDate对自身进行更改，如果按照以下写法，就会改变date[0]的值，应该首先对date[1]赋值，再进行setDate操作。

   date[1]=date[0].setDate(date[0].getDate() + 30);

示例代码

 // 选取日期后赋给 form 对应属性名
    setDateRange(date, model1, model2) {
      if (date) {
        //设置最多选择31天
        // 将日期字符串转换为 Date 对象
        let date1 = new Date(date[0]);
        let date2 = new Date(date[1]);
        // 计算时间差，单位为毫秒
        let timeDiff = date2 - date1;
        // 将毫秒转换为天数
        let daysDiff = timeDiff / (1000 * 3600 * 24);
        console.log(`时间差为：${daysDiff} 天`);
        if (daysDiff > 30) {
         this.$message.error("起止时间间隔不大于31天!");
         // 设置结束时间为起始时间 + 30 天
         date[1] = new Date(date[0]);
         date[1].setDate(date[0].getDate() + 30);
        }
        this.formData[model1] = fecha.format(new Date(date[0]), 'yyyy-MM-dd HH:mm:ss');
        this.formData[model2] = fecha.format(new Date(date[1]), 'yyyy-MM-dd HH:mm:ss');
      } else {
        this.formData[model1] = ""
        this.formData[model2] = ""
      }

    },

setDate

是 JavaScript Date 对象的方法之一，用于设置一个 Date 实例的日期部分。它接受一个数字作为参数，表示要设置的日期。它会基于当前 Date 对象的其他部分（例如月份、年份）修改日期。

语法

date.setDate(day);