背景：

使用elenmet plus 组件实现时间选择；且日期时间选择不能超过今天；连续选中时间的长度范围不能超过7天

效果展示：

 

 

实现思路：

一、使用element组件自带的属性和方法；

:disabled-date="disabledDate"

@calendar-change="calendarChange"

@blur="handleBlur" 

二、使用js方法判断，通过时间组件选择的时间范围value值是否符合条件。

一、element日期时间组价

布局代码：

//布局代码
<el-date-picker 
    v-model="data.valueTwoTimer" 
    type="datetimerange"
    value-format="YYYY-MM-DD HH:mm:ss" 
    range-separator="至" 
    start-placeholder="开始时间"
    end-placeholder="结束时间" 
    :unlink-panels="true" 
    :default-time="data.valueTwoTimer"
    :disabled-date="disabledDate" 
    @calendar-change="calendarChange"     
    @blur="handleBlur" 
/>

核心属性和方法：

:disabled-date="disabledDate" @calendar-change="calendarChange" @blur="handleBlur" 

//vue3的写法
<script setup>
import { onMounted, reactive } from "vue";
const calendarChange = (dates) => {
    let hasSelectDate = dates !== null && dates.length > 0;
    data.minTime = hasSelectDate ? dates[0] : null;
};
const disabledDate = (time) => {
    const timeRange = 1 * 24 * 60 * 60 * 1000; // 1天时间戳
    const tempTime = Date.now() - timeRange;
    //是否触发calendarChange() 
    if (data.minTime) {
        const minTime = new Date(data.minTime).getTime();
        const maxTime = new Date(data.minTime).getTime() + timeRange * 6;// 最大选择7天时间
        if (tempTime < maxTime) {
            return time.getTime() < minTime || time.getTime() > tempTime;
        }
        return time.getTime() < minTime || time.getTime() > maxTime;
    } else {
        return time.getTime() >= tempTime;//不能超过今天
    }
};
const handleBlur = () => {
    data.minTime = null;
};
</script>

二、自定义的js方法判断 

自定义一个判断最大选择7天时间的方法。调取接口时触发此方法、或者时间选择完毕后触发此方法等。

//最大7天
const timeLimite = () => {
      const minTime = timeToTimestamp(times[0]);
      const maxTime = timeToTimestamp(times[1]);
      const isOver7 = maxTime - minTime > timeRange * 7;
      if (isOver7) {
        ElMessage({
          type: "warning",
          message: `历史记录查询时间不能超过7天`,
        });
        return false;
      }
}
const timeRange = 1 * 24 * 60 * 60 * 1000; // 1天时间戳
const timeToTimestamp = (time) => {
  let timestamp = Date.parse(new Date(time).toString());
  return timestamp;
};