【VUE】element plus 日期组件动态限制日期选择范围（如同一季度）（picker-options的替代方案）

Coco小汪汪
3,897 阅读3分钟

问题描述：

业务需求为：日期选择范围控制在同一个季度，即任意选择一个日期后，日期可选范围将限制在已选日期的同一季度中，不能跨季度选择。

解决思路：

element的日期组件中，有picker-options参数，完美适配此需求，但element plus中取消了此参数。

故需要找到element plus中是否有同样功能的配置参数可以完成需求。

一，element中的解决方案：

配置picker-options参数:

参数说明类型
disabledDate设置禁用状态，参数为当前日期，要求返回 BooleanFunction
onPick选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效Function({ maxDate, minDate })
//以下代码为示意
pickerOptions:{
        onPick: ({maxDate, minDate}) => {
           //当用户点击日期软件，选择时间时触发此方法
           //在此获取用户选择时间范围的第一个日期
           
            chooseDay.value = minDate.getTime();
            if (maxDate) { chooseDay.value = '' }
         },
         disabledDate: time => {
              if (!chooseDay.value) {
                  return false;
              }
              
           //再通过此日期计算出对应季度日期范围，设置disableDate的返回值
             const season = formatSeason(chooseDay.value);
             return time < season[0] || time > season[1];
        }
}

官方文档：element.eleme.cn/#/zh-CN/com…

二，element plus中解决方案

由于element plus中取消了pickerOptions参数，故，我们需要找到以上方法的替代

1，pickerOptions中的disableDate参数：element plus中新增disabled-date参数，一个用来判断该日期是否被禁用的函数

（但单独disableDate只能设置初始禁用日期，不能随着点击日期做出动态限制，所以还是需要搭配onpick）

2，pickerOptions中的onPick参数：element plus中新增calendar-change参数，作用等同于onpick。

参数说明类型
calendar-change如果用户没有选择日期，那默认展示当前日的月份。 你可以使用 default-value 来设置成其他的日期。(val: [Date, Date])

官方文档：element-plus.org/zh-CN/compo…

代码如下：

//日期组件参数设置
 <el-date-picker
         v-model="dateRange"
         type="daterange"
         range-separator="至"
         start-placeholder="Start date"
         end-placeholder="End date"
         @change="tradeDateChange"
         @focus="handleFocus"
         @calendar-change="handleChange"
        :disabled-date="disabledDate"
 />

/** 禁选日期--日期选择不能跨越季度 */
const chooseDay = ref(null);
//@calendar-change , 点击选择第一个日期时触发
const handleChange = (val: Date[]) => {
    const [pointDay] = val;
    chooseDay.value = pointDay;
};
//重新取值时清空
const handleFocus = () => {
    chooseDay.value = null;
};
//:disabled-date 获取禁选日期范围
const disabledDate = (time: number) => {
    if (!chooseDay.value) {
        return false;
    }
    const season = formatSeason(chooseDay.value);
    return time < season[0] || time > season[1];
};

//通过日期获取当前季度范围的函数
function formatSeason(selDay) {
    const month = new Date(selDay).getMonth();
    let newmonth;
    let newmonth1;
    if (month < 3) {
        newmonth = new Date(new Date(selDay).setMonth(0));
        newmonth1 = new Date(new Date(selDay).setMonth(3));
    } else if (2 < month && month < 6) {
        newmonth = new Date(new Date(selDay).setMonth(3));
        newmonth1 = new Date(new Date(selDay).setMonth(6));
    } else if (5 < month && month < 9) {
        newmonth = new Date(new Date(selDay).setMonth(6));
        newmonth1 = new Date(new Date(selDay).setMonth(9));
    } else if (8 < month && month < 11) {
        newmonth = new Date(new Date(selDay).setMonth(9));
        newmonth1 = new Date(new Date(selDay).setMonth(12));
    }

    return [new Date(newmonth.setDate(1)).getTime(), new Date(newmonth1.setDate(0)).getTime()];
}

总结：

至此问题解决

感受：组件相关问题解决时，官方文档尤其重要，但网络资料可以提供思路，更快找到方向

一，可通过认真阅读文档及试验相关参数来寻找合适替代方法；

二，可通过资料查找有效关键词。

所以，养成随手记录的习惯挺好的，既能梳理自己的思路，又能帮助需要解决问题的小伙伴快速找到方案。

另：以上为工作记录，定有不足，期待各路指正！

avatar
文章
阅读
粉丝