Element Plus、Element日期范围选择器实现选择限制、禁止跨月选择。

前言

在使用 Element Plus 框架时，遇到了需要限制用户不能跨月选择日期范围的需求。客户要求在查询收益的报表中，只希望用户选择同一个月内的日期范围。

问题分析

Element Plus 的日期范围选择器需要用户选择两次（开始日期和结束日期），而 disabled-date 函数只能获取到当前被检查的日期，无法知道用户已经选择了哪个开始日期。因此，我们需要一种方法来捕获用户的选择过程。

解决方案

核心思路

使用 @calendar-change 事件来捕获用户的选择过程，@calendar-change返回值为日期对象组成的数组，当第二个值为null时就表明用户选择了开始日期，此时就可以配合 disabled-date 属性来实现跨月限制。

实现步骤

1. 日期选择器

<el-date-picker
  v-model="queryParams.date"
  type="daterange"
  range-separator="-"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :clearable="true"
  :disabled-date="disabledDate"
  @calendar-change="handleCalendarChange"
/>

关键是 :disabled-date="disabledDate"禁用日期和@calendar-change="handleCalendarChange"用户选择事件

2. 储存用户选择

// 存储用户选择的开始日期（用于跨月限制）
const pickedStartDate = ref<Date | null>(null);

3. 处理日历变化事件

// 处理日历变化事件
const handleCalendarChange = (value: any) => {
  console.log('calendar-change', value);

  if (value && Array.isArray(value)) {
    const [startDate, endDate] = value;
    
    if (startDate && !endDate) {
      // 用户选择了开始日期，但还没选择结束日期，将选择的日期储存，用于禁用日期的判断
      pickedStartDate.value = new Date(startDate);
      console.log('开始日期选择:', pickedStartDate.value);
    } else {
      // 清空选择
      pickedStartDate.value = null;
      console.log('清空选择');
    }
  }
};

4. 实现禁用日期函数

// Element Plus 的禁用日期函数
const disabledDate = (time: Date) => {
  // 如果没有选择开始日期，不禁用任何日期
  if (!pickedStartDate.value) {
    return false;
  }

  const startYear = pickedStartDate.value.getFullYear();
  const startMonth = pickedStartDate.value.getMonth();
  const currentYear = time.getFullYear();
  const currentMonth = time.getMonth();

  // 禁用与开始日期不在同一月的日期
  return currentYear !== startYear || currentMonth !== startMonth;
};

关键知识点

calendar-change 事件详解

calendar-change 事件会在用户选择日期时触发，返回一个日期对象数组：

• ["2025-09-03T16:00:00.000Z", null] - 用户选择了开始日期，但还没选择结束日期
• ["2025-09-03T16:00:00.000Z", "2025-09-10T16:00:00.000Z"] - 用户完成了日期范围选择

工作流程

1. 初始状态：pickedStartDate 为 null，所有日期可选
2. 选择开始日期：calendar-change 触发，pickedStartDate 设置为开始日期，disabledDate 检查每个日期，禁用与开始日期不在同一月的日期
3. 页面效果：用户点击的月份以外都是禁用的 ↓↓↓
   

Element版本

1. 使用picker-options

<el-date-picker 
	v-model="query.dateRange"
	type="daterange"
	range-separator="-"
	start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd"
    :picker-options="pickerOptions"
/>

2.定义data

// 在 data 中添加
pickedStartDate: null,
pickerOptions: {
  onPick: ({ maxDate, minDate }) => {
    if (minDate && !maxDate) {
      this.pickedStartDate = minDate;
    } else if (maxDate && minDate) {
      this.pickedStartDate = null;
    }
  },
  disabledDate: (time) => {
    if (!this.pickedStartDate) {
      return false;
    }
    
    const startYear = this.pickedStartDate.getFullYear();
    const startMonth = this.pickedStartDate.getMonth();
    const currentYear = time.getFullYear();
    const currentMonth = time.getMonth();
    
    return currentYear !== startYear || currentMonth !== startMonth;
  }
}

总结

element plus通过使用 @calendar-change 事件捕获用户选择过程，配合 disabled-date 属性实现跨月限制。element则使用picker-options属性，内部的onPick逻辑和calendar-change本质是一样的，disabledDate更是原封不动。