解决element ui的DatePicker日期选择器中default-time属性和disabledDate方法的冲突点

解决element ui的DatePicker日期选择器中default-time属性和disabledDate方法的冲突点,第1张

        一般情况下用 DatePicker 组件选择时间段( type = "daterange" )的时候,不设置 default-time 属性的话,选择的时间结果都是当天的 00:00:00 ,一般后端接收的时候需要传值时间戳,比如选择 2022-05-25 到 2022-05-26 ,最后的结果是 [2022-05-25 00:00:00, 2022-05-26 00:00:00] ,但是按照正常的想法来,选择这两天的结果应该是 [2022-05-25 00:00:00, 2022-05-26 59:59:59] ,很简单加上 :default-time="['00:00:00', '23:59:59']" 这个属性就好了。

        但是很多时候需求是选择时间的范围是今天之后的日期不能选择(一般数据统计上选择未来的时间查数据是无意义的),这个时候就要在 pickerOptions 里加上 disabledDate 方法了disabledDate: (time) => { return time.getTime() > Date.now() },至此看上去没啥问题,但是最后用的时候发现,选择不了当天。。。

        原来,选择今天的 getTime() 值为 2022-05-26 59:59:59 大于 Date.now(),毕竟你不是在深夜的最后一秒在 *** 作这个时间控件,所以这一天你选中不了,但是不知道为啥这天又不是禁用状态。。。

        解决办法:

:default-time="['00:00:00', '23:59:59']"

disabledDate: (time) => {
    const date = new Date()
    return time.getTime() > new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59).getTime()
}

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1321969.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存