解决Element DateTimePicker无法选择当天日期

解决Element DateTimePicker设置了default-time和时间选择范围后无法选择当天

原代码如下,default-time设置选中日期后的默认具体时刻,picker-options设置能限制选择的时间范围。
html

<el-date-picker
    :default-time="['00:00:00', '23:59:59']"  
    v-model="start_end_time"
    type="datetimerange"
    range-separator="-"
    clearable
    :picker-options="pickerOptions"     
    value-format="yyyy-MM-dd HH:mm:ss"
    start-placeholder="开始时间"
    end-placeholder="结束时间">
</el-date-picker>

js

data (){
   return {
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6   //通过计算此刻的时间戳来限制只能选择此刻及以前的时间范围
          }
        },  
   }     
}  

问题: 设置完default-timepicker-options两个属性后,当选择当天时间后,无法点击确定按钮。如图:
在这里插入图片描述
原因: 在上面代码中,设置 pickerOptions属性只能选择此刻及之前的时间。当你选择当天时,default-time会默认结束时间为'23:59:59',你的结束时间属于之后的时间范围,与 pickerOptions属性冲突。因此无法点击确认按钮。
解决: 更改pickerOptions属性设置,限制只能选择当天'23:59:59'及之前的日期时间

data (){
   return {
       pickerOptions: {
       		//disabledDate函数返回的是被禁止选择的日期
           disabledDate(time) {
               let current_time = new Date().Format('yyyy-MM-dd')+' 23:59:59';  //时间日期为:‘当前日期 23:59:59’
               let t = new Date(current_time).getTime(); //‘当前日期 23:59:59’的时间戳
               return time.getTime() > t;
             }
       },
   }     
}  

注:return语句中的Format是添加到Date原型上的一个方法,作用是将日期时间格式(如:Wed Nov 10 2021 14:40:08 GMT+0800)转换成'yyyy-MM-dd'或其他格式的日期。具体操作可以参考我的文章:时间戳和日期格式的相互转换。当然你也可以使用其他方法,能达到目的就成。


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值