elment-ui 日期选择器月份区间选择的问题解决

最新推荐文章于 2024-04-11 18:40:38 发布

张小哇

最新推荐文章于 2024-04-11 18:40:38 发布

阅读量843

点赞数

分类专栏：前端笔记文章标签： elementui 前端 vue

本文链接：https://blog.csdn.net/weixin_42781537/article/details/116145437

版权

前端笔记专栏收录该内容

11 篇文章

订阅专栏

elment-ui 日期选择器月份区间选择的问题解决

问题描述

日期选择器-月份区间选择；设置不可用时间后，（如设置当前月份往前推两年时间不可用）；
可用日期第一个月点击不生效。
在这里插入图片描述
点击四月不能选中，其他月份正常

解决方法

之前的不可用日期写法为：

const pre = new Date();
const twoYears = pre.setFullYear(pre.getFullYear() - 2);
return time.getTime() > Date.now() || time.getTime() < twoYears ;

这时候我把monthrange换成daterange以后，发现问题；例当前日期:2021-04-25，不可用日期为2019-04-25以前的日期，所以这时候我在想月份区间选择的时候，虽然显示的月份是可点击的，会不会是因为里面一些天数不可点击，导致可选日期的第一个月点击事件不生效。
在这里插入图片描述

所有我把返回不可用日期的两年前日期做了修改，返回的是两年前当前月份1号的日期，小于这个日期的月份不可用。问题迎刃而解。

// 两年内时间可选
const pre = new Date();
// 获取两年前这个月的1号
const fullDate = (pre.getFullYear() - 2) + "-" + (pre.getMonth()+ 1) + "-01";
const judgeDate = new Date(fullDate);
return time.getTime() > Date.now() || time.getTime() < judgeDate;