element-plus中实现日期组件七天范围选中

1.html

<template>
  <el-form :model="state.newFormData" :inline="true" label-width="80" class="demo-form-inline">
    <el-form-item label="start Time">
      <el-date-picker v-model="state.newFormData.startTime" :disabled-date="disabledDateStart" type="date"
        placeholder="Pick a day" />
    </el-form-item>
    <el-form-item label="end Time">
      <el-date-picker v-model="state.newFormData.endTime" :disabled-date="disabledDate" type="date"
        placeholder="Pick a day" />
    </el-form-item>
  </el-form>
</template>

2.js

const initNewFormData = () => {
  return {
  	startTime:"",
  	endTime: "",
  };
};
const state = reactive({
	newFormData: initNewFormData(),
});
const { newFormData} = toRefs(state);
const disabledDate = (time:any) => {
	if (state.newFormData?.startTime) { // 如果开始时间不为空，则结束时间大于开始时间
		return new Date(state.newFormData?.startTime).getTime() > time.getTime() || new Date(state.newFormData?.startTime).getTime() < time.getTime() - 1000 * 3600 * 24 * 7;
	}
	return time.getTime() >= Date.now();
}
// 设置开始时间在结束时间之前
const disabledDateStart = (time:any) => {
	if (state.newFormData?.endTime) { // 如果结束时间不为空，则小于结束时间
		return new Date(state.newFormData?.endTime).getTime() < time.getTime() || new Date(state.newFormData?.endTime).getTime() > time.getTime() + 1000 * 3600 * 24 * 7;
	}
	return "";
}