问题:Element-ui中DateTimePicker设置了default-time和picker-options(时间选择范围)后无法选择当天日期
一、问题描述
在设置完default-time
及picker-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();//获取时间戳 }, },