限制只能选择当前时间前/后的时间(包含日期、时、分)
- 首先需要给添加一个属性picker-options属性,然后在data中定义这个pickerOptions属性。
<el-date-picker
v-model="saveForm.startTime"
:picker-options="pickerOptions"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
type="datetime"
placeholder="选择开始时间"
style="width: 47%"
default-time="9:00:00"
/>
- disabledDate用于禁用当前日期前的所有日期,有的小伙伴可能会疑问,为什么要“-8.64e7”,是因为单纯使用time.getTime() < Date.now() 这段代码的效果是会使当前日期也会被禁用掉,这时候就需要在当前日期的基础上减掉一天,表示可以选择当天。
限制完日期后,可能还会需要限制时间的选择,这里我们使用selectableRange对时间进行限制,获取当前时间,然后做一个时间的拼接即可。限制只能选择当前时间前的代码如下,稍微变动一下:
data(){
return:{
pickerOptions: {
disabledDate: time => {
return time.getTime() < Date.now() - 8.64e7
},
selectableRange: new Date().getHours() + ':' + (new Date().getMinutes() + 1) + ':00' + ' - 23:59:59'
}
}
}
3 ,以上代码只是限制了当天的的时间的选择,还没有完成。我们需要在合适的时间对我们的时间选择框进行放开和限制。比如限制只能选择当前时间前的时间,那么前一天的时间是00:00:00-23:59:59的时间都可以选择,而今天则不能放开全选。参考以下代码:
watch:{
// 开始时间
'saveForm.startTime'(selectTime){
const date = new Date(new Date(selectTime).setHours(0,0,0,0)).getTime()
const today = new Date(new Date().setHours(0,0,0,0)).getTime()
if (date <= today){
// 当选择的日期就是当天的时候,这个时候就要限制时间应当大于此时此刻的时分秒
this.pickerOptions.selectableRange = new Date().getHours() + ':'+(new Date().getMinutes()+1)+':00' + '- 23:59:59'
}else {
// 当选择的日期大于当天的时候,这时需要把时分秒的限制放开,否则不能选择
this.pickerOptions.selectableRange = '00:00:00 - 23:59:59'
}
},
// 结束时间
'saveForm.endTime'(selectTime){
const date = new Date(new Date(selectTime).setHours(0,0,0,0)).getTime()
const today = new Date(new Date().setHours(0,0,0,0)).getTime()
if (date <= today){
// 当选择的日期就是当天的时候,这个时候就要限制时间应当大于此时此刻的时分秒
this.pickerOptions.selectableRange = new Date().getHours() + ':'+(new Date().getMinutes()+1)+':00' + '- 23:59:59'
}else {
// 当选择的日期大于当天的时候,这时需要把时分秒的限制放开,否则不能选择
this.pickerOptions.selectableRange = '00:00:00 - 23:59:59'
}
}