天天看点

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

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

继续阅读