问题:Element-ui中DateTimePicker设置了default-time和picker-options(时间选择范围)后无法选择当天日期

一、问题描述

  在设置完default-timepicker-options两个属性后,当选择当天时间时,无法选中填入时间!!

<el-date-picker
      v-model="dateTime"
      unlink-panels
      value-format="yyyy-MM-dd HH:mm:ss"
      type="daterange"
      range-separator="~"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      :picker-options="pickerOptions"
    >
 </el-date-picker>

 data: () => ({
    pickerOptions: {
      disabledDate: (date) => {
        date.getTime() > Date.now() - 86400000; //通过计算此刻的时间戳限制的只能选择此刻及以前的时间范围
      },
    },
    dateTime: ["", ""],
  }),

二、解决方案

在查看了大神们的博客之后发现得以解决此问题!

产生原因:由于我在组件中设置 的pickerOptions属性意为只能选择此刻及之前的时间(这是个坑)。当选择当天时,default-time会默认结束时间为'23:59:59',而此刻我们选择的结束时间属于未来(之后)的时间范围,会与 pickerOptions属性冲突。因此无法选择!!需要更改disabledDate中的计算。

 注:$dateFormat是封装好的日期格式转换的方法,其他方式也可以实现!

pickerOptions: {
      disabledDate: (date) => {
        let time = $dateFormat(new Date(), "yyyy-MM-dd 23:59:59"); //时间日期为:当前日期 23:59:59
        return date.getTime() > new Date(time).getTime();//获取时间戳
      },
    },

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值