vue3ElementPlus使两个日期联动控制(开始日期不能晚于结束日期一个月外，结束日期的可选范围在开始日期的一个月之内)

vue3ElementPlus两个日期联动控制(限制结束时间为开始时间的一个月)

• 代码展示

<template>
  <div>
    <h1>日期选择器</h1>
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="选择开始日期"
      @change="onStartDateChange"
      :disabled-date="disabledStartDate"
    />
    <el-date-picker
      v-model="endDate"
      type="date"
      placeholder="选择结束日期"
      :disabled-date="disabledEndDate"
      @change="onEndDateChange"
    />
    <p>开始日期: {{ startDate }}</p>
    <p>结束日期: {{ endDate }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const startDate = ref('');
    const endDate = ref('');

    const onStartDateChange = () => {
      if (endDate.value && new Date(endDate.value) < new Date(startDate.value)) {
        endDate.value = '';
      }
    };

    const onEndDateChange = () => {
      if (!startDate.value) {
        const end = new Date(endDate.value);
        const monthAgo = new Date(end);
        monthAgo.setMonth(end.getMonth() - 1);
        startDate.value = monthAgo.toISOString().split('T')[0];
      }
    };

    const disabledStartDate = (date) => {
      //return endDate.value ? date > new Date(endDate.value) : false;
       const start = endDate.value ? new Date(endDate.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 = startDate.value ? new Date(startDate.value) : null;
      if (start) {
        const maxEndDate = new Date(start);
        maxEndDate.setMonth(maxEndDate.getMonth() + 1);
        return date < start || date > maxEndDate;
      }
      return false;
    };

    return {
      startDate,
      endDate,
      onStartDateChange,
      onEndDateChange,
      disabledStartDate,
      disabledEndDate,
    };
  },
};
</script>

<style>
/* 可根据需要添加样式 */
</style>

关键点

• 联动逻辑：当选择开始日期时，结束日期会受到相应限制；如果没有选择开始日期，结束日期的选择会影响开始日期的可选范围。
• 禁用逻辑：开始日期不能晚于结束日期，结束日期的可选范围在开始日期的一个月之内。

额外提示

确保在你的项目中已经安装并引入了 Element Plus 组件库，以使日期选择器正常工作。