Vue3+ElementPlus el-date-picker 时间范围设置, 固定时间段为一年内 / 选中前后5天

Vue3 template 部分

 <el-date-picker
        v-model="selectButton"
        type="daterange"
        size="large"
        range-separator="To"
        value-format="YYYY-MM-DD"
        popper-class="choose-day-popper"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :disabled-date="disabledDate"
        @change="dataSelect"
        @calendar-change="calendarChange"
    />

calendar-change: 在日历所选日期更改时触发

vue3 逻辑部分采用 setup 语法糖完整代码如下

const selected = ref(false);//判断是否选中一个日期
const selectDate = ref();//开始日期
const selectButton = ref();
const emit = defineEmits(["update:modelValue", "select"]);

const calendarChange = (time) => {
  let startTime
  if (time[0] != null && time[1] == null) {
    startTime = time[0].getTime();//开始日期
    selectDate.value = startTime;
    selected.value = true
  }
}

const disabledDate = (date) => {
  if (!selected.value) {
    let currDate = new Date();
    currDate.setFullYear(currDate.getFullYear() - 1);//设置日期对象的年份为去年
    return date.getTime() > Date.now() || date.getTime() < currDate.getTime();//固定选择范围为一年内
  } else {
    let currTime = selectDate.value;
    let startTime = currTime - (24 * 4 * 60 * 60 * 1000);//5 天前的日期
    let endTime = currTime + (24 * 4 * 60 * 60 * 1000);//5 天后的日期
    let nowTime = Date.now();
    endTime = endTime > nowTime ? nowTime : endTime;//如果 5 天后的日期在现在日期之前, 则截止为 nowTime, 否则为 endTime
    let time = date.getTime();
    return !(time >= startTime && time <= endTime);
  }
}

const dataSelect = (val) => {
  if (val !== null) {
    selected.value = false
    emit("select", val);
  } else {
    emit("select", false);
  }
  emit("update:modelValue", val);
};
</script>