【功能开发】添加按月按日查询器，禁用当月当天之后的选择

需求描述一、业务需求背景原始项目现状目前项目为Vue2后台管理系统项目二次封装通用业务组件w-range-picker业务自定义组件底层封装el-date-picker原有仅支持时间范围查询存在两个线上问题缺少按日、按月查询切换功能报表、能耗统计只能固定时间筛选查询灵活性差未做日期限制用户可选择当月、当天之后的未来日期后端无数据频繁报接口空数据、参数异常原生el-date-picker禁用逻辑存在时区bug零点判断不准偶尔出现当天无法选中问题本次开发需求优化自研组件 w-range-picker新增维度切换按日查询 / 按月查询时间强校验禁止选择当天之后日期按月模式禁止选择当月之后月份保留原有水务大屏样式、组件双向绑定逻辑零侵入改造兼容历史所有业务页面修复日期时间戳时区偏移bug避免临界日期禁用异常二、前置知识点科普w-range-picker组件来源很多小伙伴疑惑该组件不是Element、AntD官方组件这里统一说明w前缀含义项目自定义业务前缀区分UI库原生组件底层封装二次封装 ElementUI el-date-picker拓展业务快捷时间、样式适配、日期格式化通用逻辑存放地址src/components/w/ 全局注册公共业务组件全局无需手动引入日期禁用核心原理el-date-picker 提供 disabledDate 回调函数返回 true禁用当前日期不可点击返回 false放开日期正常可选踩坑重点禁止直接使用 Date.now() 判断携带时分秒会造成当天傍晚触发禁用必须归一化日期零点比对代码解决1.为w-range-picker组件加入:disabledDate属性并绑定对应method:disabledDatedisableMonthFntemplate#ticketTimedivstyledisplay:flex;gap:8px;align-items:center;width:100%;!-- 切换开关 --w-radio-groupv-modeldateModechangehandleDateModeChangew-radiovaluemonth按月/w-radiow-radiovalueday按日/w-radio/w-radio-group!-- 月份选择器 --w-range-pickerv-ifdateMode month:mode[month, month]formatYYYY-MMv-modelyearMode:openyearShowOnecell-class-namecellClassName:allowClearfalse:disabledDatedisableMonthFnopenChangeopenChangeOnepanelChangepanelChangeOnestyleflex:1;min-width:280px/!-- 日期选择器 --w-range-pickerv-elseformatYYYY-MM-DDv-modeldayRange:allowClearfalse:disabledDatedisableDayFnchangehandleDayChangestyleflex:1;min-width:280px//div/template2.在method下写入对应方法disableDayFn(currentDate){if(!currentDate)returnfalse;consttodaymoment().startOf(day);constisDisabledcurrentDate.isAfter(today);returnisDisabled;},效果展示拓展只禁用明天及以后今天可选constisDisabledcurrentDate.isAfter(today);想禁用今天 未来只能选过去constisDisabledcurrentDate.isSameOrAfter(today);禁用所有过去日期只能选今天和未来constisDisabledcurrentDate.isBefore(today);