1、封装组件weekTimeRange.vue

<!-- 周范围选择器，中间不超过四周 -->
<template>
  <div>
    <el-date-picker
      v-model="startTime"
      type="week"
      format="[Week] ww"
      @change="changeStartTime"
      placeholder="选择起始周"
      :disabled-date="disabledStartDate"
    >
    </el-date-picker>

    <span class="text">至</span>

    <el-date-picker
      v-model="endTime"
      type="week"
      @change="changeEndTime"
      format="[Week] ww"
      placeholder="选择结束周"
      :disabled-date="disabledEndDate"
    >
    </el-date-picker>
  </div>
</template>

<script setup>
import {
  selectEndWeek,
  limitTheEndTime,
  selectStartWeek,
  formaData,
  limitTheStartTime
} from './time.js'

const emit = defineEmits(['startTime', 'endTime'])

const startTime = ref(null)

const endTime = ref(null) //显示的结束时间

const requestStartTime = ref(null) //实际发送请求的开始周时间

const requestEndTime = ref(null) //实际发送请求的结束周时间

const limitEndTime = ref(null) //选择开始时间后 ，选择的开始时间在选择结束时间时是开始时间，后四周可以选择

const limitStartTime = ref(null) //选择结束时间后，选择的结束时间是选择开始时间的结束时间，前四周可以选择

const disabledStartDate = (date) => {
  const start = endTime.value ? new Date(endTime.value) : null
  if (start) {
    const maxEndDate = new Date(start)
    maxEndDate.setMonth(maxEndDate.getMonth() - 1)
    return date > start || date < maxEndDate
  }
  return false
}

const disabledEndDate = (date) => {
  const start = startTime.value ? new Date(startTime.value) : null
  if (start) {
    const maxEndDate = new Date(start)
    maxEndDate.setMonth(maxEndDate.getMonth() + 1)
    return date < start || date > maxEndDate
  }
  return false
}

function changeStartTime(val) {
  if (val == null) {
    limitEndTime.value = null

    requestStartTime.value = null
  } else {
    limitEndTime.value = limitTheEndTime(val)

    requestStartTime.value = selectStartWeek(val)

    emit('startTime', formaData(requestStartTime.value))
  }
}

function changeEndTime(val) {
  if (val == null) {
    limitStartTime.value = null

    requestEndTime.value = null
  } else {
    limitStartTime.value = limitTheStartTime(val)

    requestEndTime.value = selectEndWeek(val)

    emit('endTime', formaData(requestEndTime.value))
  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 13px;

  margin: 0 10px;

  font-weight: 400;
}
</style>

2、time.js

export function selectStartWeek(time) {

  let myDate = new Date();

  if (time) myDate = new Date(time);

 let newDate= myDate.setDate(myDate.getDate()-1)

 return newDate

}

export function selectEndWeek(time) {

  let myDate = new Date();

  if (time) myDate = new Date(time);

   myDate.setDate(myDate.getDate() + 5); // 推移5天

   myDate.setHours(23, 59, 59, 999); // 设置为23:59:59.999

   return myDate.getTime(); // 返回时间戳

}

export function limitTheEndTime(time) {           //限制选择结束时间

    const pastDate = new Date(time);

    const lastDay = new Date(pastDate);

    // 推移四周，并计算到下一个周日

    lastDay.setDate(pastDate.getDate() + (4 * 7) - pastDate.getDay());

    lastDay.setHours(23, 59, 59, 999); // 设置为当天的最后一刻

    return lastDay.getTime(); // 返回时间戳

}

export function limitTheStartTime(time) { // 限制选择开始时间

    const pastDate = new Date(time);

    const firstDay = new Date(pastDate);



    // 计算到前四周的星期一

    firstDay.setDate(pastDate.getDate() - (3 * 7) - (pastDate.getDay() - 1));

    firstDay.setHours(0, 0, 0, 0); // 设置为当天的开始时刻



    return firstDay.getTime(); // 返回时间戳

}

export function timestamp(time) {

  //将时间转变为时间戳

  let myDate = new Date();

  if (time) myDate = new Date(time);

  return myDate.getTime();

}

export function formaData(time) {

  let myDate = new Date();

  if (time) myDate = new Date(time);

  let getFullYear = myDate.getFullYear();

  let Month = myDate.getMonth() + 1;

  if (Month < 10) Month = "0" + Month;

  let getDate = myDate.getDate();

  if (getDate < 10) getDate = "0" + getDate;

  let getHours = myDate.getHours();

  if (getHours < 10) getHours = "0" + getHours;

  let getMinutes = myDate.getMinutes();

  if (getMinutes < 10) getMinutes = "0" + getMinutes;

  let getSeconds = myDate.getSeconds();

  if (getSeconds < 10) getSeconds = "0" + getSeconds;

  return `${getFullYear}-${Month}-${getDate} ${getHours}:${getMinutes}:${getSeconds}`;

}