Element-plus DateTimePicker日期时间选择器 限制日期范围

限制年份范围在5年(最多选5年)

    <el-date-picker v-model="value1" type="yearrange"
    range-separator="至" start-placeholder="开始日期" 
    end-placeholder="结束日期"
    :disabled-date="disabledDate" 
    @calendar-change="cakebdarChange" />

element-plus官网的解释：

• @calendar-change : 如果用户没有选择日期，那默认展示当前日的月份。 选中日历日期后会执行的回调，只有当datetimerange 才生效
• :disabled-date :一个用来判断该日期是否被禁用的函数，接受一个 Date
  对象作为参数。 应该返回一个 Boolean 值。

当选择日期时触发cakebdarChange:

// 定义一个变量用来 存储你当前选择的是开始日期还是结束日期
const choiceDate = ref()
 const cakebdarChange = (obj: //[开始日期，结束日期]) => {
    const minDate = obj[0]
    const maxDate = obj[1]
    choiceDate.value = minDate.getTime();
    //如果已经选择结束日期的话将choiceDate变为null
    if (maxDate) choiceDate.value = null;
}

然后是disabledDate禁用日期：

• 它的主要作用是用来禁用特定的日期，使其在日期选择器中不可被选择。
• 例如，在一个预订系统中，你可能希望禁用过去的日期，以防止用户选择已经过去的时间进行预订。 或者在特定的业务场景下，某些特定的日期可能因为特殊原因（如系统维护、节假日等）而不应该被用户选择，这时就可以使用
  “disabled-date” 属性来指定这些不可选的日期。
• 调用时机:可能会调用这个函数来确定哪些日期应该被禁用。例如，当页面加载时，日期选择组件开始显示日期列表，此时可能会遍历所有日期并调用disabledDate函数来判断每个日期是否可被选择。

export const disabledDate = (time) => {
    const targetDate = new Date(); // 创建一个表示当前日期的对象。

    if (choiceDate.value) {
        // 如果 choiceDate 有值，即用户已经选择了一个日期
        const selectedYear = new Date(choiceDate.value).getFullYear();
        // 获取用户选择日期的年份。
        const minYear = selectedYear - 4;
        const maxYear = selectedYear + 4;
        // 确定一个以用户选择年份为中心，前后四年的范围。
        const timeYear = new Date(time).getFullYear();
        // 获取传入的时间参数对应的年份。
        return timeYear < minYear || timeYear > maxYear || time.getTime() > targetDate.getTime();
        // 返回满足以下条件之一的结果：传入时间的年份小于最小允许年份、大于最大允许年份，或者传入时间在当前日期之后。
    } else {
        // 如果 choiceDate 没有值，即用户还未选择任何日期
        const currentYear = new Date().getFullYear();
        // 获取当前年份。
        const timeYear = new Date(time).getFullYear();
        return timeYear > currentYear;
        // 返回传入时间的年份是否大于当前年份的结果，如果是则表示该时间被禁用。
    }
};

限制月份范围在24个月

 <el-date-picker 
 v-model="value1" type="monthrange" 
 range-separator="至" 
 start-placeholder="开始日期" 
 end-placeholder="结束日期"
:disabled-date="disabledDateMonth" 
@calendar-change="cakebdarChange" />

export const disabledDateMonth = (time) => {
 // 获取当前的年份和月份。
    const currentYear = new Date().getFullYear();
    const currentMonth = new Date().getMonth();
    
     // 获取传入时间参数对应的年份和月份
    const timeYear = new Date(time).getFullYear();
    const timeMonth = new Date(time).getMonth();
    
    // 如果 choiceDate 有值，即用户已经选择了一个日期
    if (choiceDate.value) {
      // 获取用户选择日期的年份和月份
        const selectedDate = new Date(choiceDate.value);
        const selectedYear = selectedDate.getFullYear();
        const selectedMonth = selectedDate.getMonth();
        // 计算最小允许的年份和月份，如果计算出的月份小于 0，则调整年份并重新计算月份。
        let minYear = selectedYear;
        let minMonth = selectedMonth - 24;
        if (minMonth < 0) {
            minYear = minYear - 2;
            minMonth += 24;
        }
            // 计算最大允许的年份和月份，如果计算出的月份大于 11，则调整年份并重新计算月份。
        let maxYear = selectedYear;
        let maxMonth = selectedMonth + 24;
        if (maxMonth > 11) {
            maxYear = maxYear + 2;
            maxMonth -= 24;
        }
  
        const timeYear = new Date(time).getFullYear();
        const timeMonth = new Date(time).getMonth();
   // 返回满足以下条件之一的结果：传入时间的年份小于最小允许年份或年份相等但月份小于最小允许月份；传入时间的年份大于最大允许年份或年份相等但月份大于最大允许月份；传入时间的年份大于当前年份或年份相等但月份大于当前月份。
        return (
            (timeYear < minYear || (timeYear === minYear && timeMonth < minMonth)) ||
            (timeYear > maxYear || (timeYear === maxYear && timeMonth > maxMonth)) ||
            timeYear > currentYear || (timeYear === currentYear && timeMonth > currentMonth)
        );
     
    } else {
          // 如果 choiceDate 没有值，即用户还未选择任何日期，返回传入时间的年份是否大于当前年份或年份相等但月份大于当前月份的结果
        return timeYear > currentYear || (timeYear === currentYear && timeMonth > currentMonth);
 
    }
};

• disabledDate函数的计算相对简单，主要涉及年份的比较和判断当前日期之后的情况。
• disabledDateMonth函数在用户已选择日期的情况下，需要进行月份的加减运算以确定最小和最大允许的年份和月份，计算过程相对复杂一些。

限制天数范围在60天

直接上代码:

export const disabledDateDay = (time) => {
    const daysRange = 2 * 30; // 24 个月的近似天数，这里假设一个月为 30 天。
    const millisecondsInDay = 24 * 60 * 60 * 1000;
    // 一天的毫秒数。

    const currentYear = new Date().getFullYear();
    const currentMonth = new Date().getMonth();
    const timeYear = new Date(time).getFullYear();
    const timeMonth = new Date(time).getMonth();
    // 获取当前年份、月份以及传入时间对应的年份和月份。

    if (choiceDate.value) {
        // 如果用户已经选择了一个日期。
        const selectedDate = new Date(choiceDate.value);
        const selectedTime = selectedDate.getTime();
        // 获取用户选择日期的时间戳。

        const rangeInMilliseconds = daysRange * millisecondsInDay;
        // 计算前后大约 24 个月对应的毫秒数范围。

        const minDate = new Date(selectedTime - rangeInMilliseconds);
        const maxDate = new Date(selectedTime + rangeInMilliseconds);
        // 确定最小和最大允许的日期。

        const timeDate = new Date(time);
        return timeDate < minDate || timeDate > maxDate || timeYear > currentYear || (timeYear === currentYear && timeMonth > currentMonth);
        // 返回满足以下条件之一的结果：传入时间对应的日期小于最小允许日期、大于最大允许日期、传入时间的年份大于当前年份或者年份相同但月份大于当前月份。
    } else {
        return timeYear > currentYear || (timeYear === currentYear && timeMonth > currentMonth);
        // 如果用户没有选择日期，返回传入时间的年份是否大于当前年份或年份相同但月份大于当前月份的结果。
    }
};