解决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-time
及picker-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'
或其他格式的日期。具体操作可以参考我的文章:时间戳和日期格式的相互转换。当然你也可以使用其他方法,能达到目的就成。