使用element的日期时间选择器,时间可选范围从远程获取
背景:最近需要使用日期时间选择器,且时间可选范围需要从接口获取。
实现如下:
// template
<el-date-picker
v-model="time"
:picker-options="pickerOptions"
type="datetime" />
// script
data() {
return {
pickerOptions: {
disabledDate: time => {
let date = new Date()
return time > date || time < new Date(date - 7 * 24 * 60 * 60 * 1000)
}
}
}
},
methods: {
getTime() {
api.getTime({
params: {
xx: xx
}
})
.then(res => {
this.pickerOptions.disabledDate = this.hofdisabledDate(res.data.time)
})
}
hofdisabledDate(result) {
// 远程获取的时间处理后的值
let minTime = this.minTime(result.startTime)
let maxTime = this.maxTime(result.endTime)
// 再返回与原pickerOptions.disabledDate类型相同的函数,此时也不会该改变this指向
return time => {
// disabledDate func
return time > maxTime || time < minTime
}
}
}
以上可实现远程获取数据后,再改变可选值范围。但是此方法受el-date-picker本身约束,只能限制日期,不能限制具体时间点。