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

最新推荐文章于 2024-08-22 13:30:11 发布

消失的搬砖工

最新推荐文章于 2024-08-22 13:30:11 发布

阅读量3.2k

点赞数 4

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_40035210/article/details/124989006

版权

        一般情况下用 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()
}