vue实现el-date-picker和el-calendar的联动效果

此方法为vue3（vue2同理）

• 首先监听el-date-picker中数据的变化
• 使用el-calendar中的 range 方法进行日期范围的自定义
  
  由上图可知，range的范围=开始时间必须是周起始日（周一），结束时间必须是周结束日（周日）
  因此需要对el-date-picker中选择的时间范围进行判断处理，并且限定选择的日期范围不能超过两个月。
• 日期范围限定
  通过disabledDate方法来实现

function disablesDate(time) {
  const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 30; //最小时间可选前七天
  const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 30; //最大时间可选今天
  return time.getTime() <= _maxTime || time.getTime() > _minTime;
}

• 对于el-date-picker中时间的处理通过 date.getDay()和date.getDate()等方法实现

watch(timeRanger, (newValue, oldValue) => {
  if (newValue != oldValue) {
    let startTime = new Date(newValue[0]);

    let endTime = new Date(newValue[1]);

    if (startTime.getDay() !== 1) {
      // 获取选择的日期是周几（0-6，0为周日）

      let dayOfWeek = startTime.getDay();

      // 如果当前日期不是周日，则将日期减去一天
      if (dayOfWeek !== 0) {
        const days = startTime.getDay() - 1;
        console.log("星期", startTime.getDay());
        startTime.setDate(startTime.getDate() - days);
      }
    }
    if (endTime.getDay() !== 0) {
      let dayOfWeek = endTime.getDay();

      // 计算从选择的日期到周日的日期差（7天减去选择的日期与周日的差值）
      let diff = 7 - dayOfWeek;

      // 对日期进行加减操作
      endTime.setDate(endTime.getDate() + diff);
    }

    const start = moment(startTime).format("yyyy-MM-DD").toString();
    const end = moment(endTime).format("yyyy-MM-DD").toString();
    dateRange = [start, end];
    // console.log("000000", dateRange);
  }
});

完整代码如下

<template>
  <div class="container">
    <el-date-picker
      value-format="YYYY-MM-DD"
      v-model="timeRanger"
      type="daterange"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :disabledDate="disablesDate"
      style="margin: 10px 0;"
    ></el-date-picker>
    <el-calendar :range="dateRange">
      <template #date-cell="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }}
          {{ data.isSelected ? '✔️' : '' }}
        </p>
      </template>
    </el-calendar>
  </div>

</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import moment from "moment";
const timeRanger = ref([]);
let dateRange = ref([new Date(2024, 6, 3), new Date(2024, 6, 23)]);

function disablesDate(time) {
  const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 30; //最小时间可选前七天
  const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 30; //最大时间可选今天
  return time.getTime() <= _maxTime || time.getTime() > _minTime;
}

watch(timeRanger, (newValue, oldValue) => {
  if (newValue != oldValue) {
    let startTime = new Date(newValue[0]);

    let endTime = new Date(newValue[1]);

    if (startTime.getDay() !== 1) {
      // 获取选择的日期是周几（0-6，0为周日）

      let dayOfWeek = startTime.getDay();

      // 如果当前日期不是周日，则将日期减去一天
      if (dayOfWeek !== 0) {
        const days = startTime.getDay() - 1;
        console.log("星期", startTime.getDay());
        startTime.setDate(startTime.getDate() - days);
      }
    }
    if (endTime.getDay() !== 0) {
      let dayOfWeek = endTime.getDay();

      // 计算从选择的日期到周日的日期差（7天减去选择的日期与周日的差值）
      let diff = 7 - dayOfWeek;

      // 对日期进行加减操作
      endTime.setDate(endTime.getDate() + diff);
    }

    const start = moment(startTime).format("yyyy-MM-DD").toString();
    const end = moment(endTime).format("yyyy-MM-DD").toString();
    dateRange = [start, end];
    // console.log("000000", dateRange);
  }
});
</script>