解决el-date-picker 设置禁用日期(当天不禁用),无法选择当天日期

祝大家过节不加班哦 ~

直接展示我根据官网的picker-options的用法写的一年内日期可用,其他禁用的代码

因为是封装,pickerOptions不能写在return里,所以我是在data里定义的,html部分就不展示了,其实和官网el-date-picker的组件大致相同,:picker-options="pickerOptions" 以及 :default-time="['00:00:00', '23:59:59']" 都是在封装里写的

data() {
    var pickerOptions = {
      disabledDate(time) {
        const startDate = new Date()
        const endDate = new Date()
        startDate.setFullYear(endDate.getFullYear() - 1)
        return time.getTime() < startDate || time.getTime() > endDate
      }
    }
}

写好后发现,其他都正常,但是选择当天的时候,虽然不是禁用状态,但点击无效

在网络大佬那里得到了原因,pickerOptions里,我定义的endDate最大值是此刻,也就是点击时的时分秒,但同时,当点击当日时,default-time默认结束时间是当日的'23:59:59',导致选择的结束时间大于endDate规定的时间(虽然前端没有展示禁用状态,但相当于点击了一个在禁用状态的时间),因此点击无效。(idea from https://blog.csdn.net/qq_42342276/article/details/120994927

本来感觉大佬写的很全,我没必要再写一遍,但后来发现,大佬给的修改方法属实有点复杂了,就把自己的方法贴出来做个记录(知道原因后为了保险startDate也处理了一下,不处理前选开始时间貌似也没出现啥问题)

var pickerOptions = {
      disabledDate(time) {
        const startDate = new Date()
        const endDate = new Date()
        startDate.setHours(0, 0, 0, 0)// 开始时间:当日00:00:00:00
        startDate.setFullYear(endDate.getFullYear() - 1)// 开始时间:去年当日00:00:00:00
        endDate.setHours(23, 59, 59, 59) // 结束时间:当日23:59:59:59
        return time.getTime() < startDate || time.getTime() > endDate
      }
    }
}

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值