例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 ;
当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选;实现如下;
<el-form-item label="时间选择" prop="addTime">
<el-date-picker
:editable="false"
unlink-panels
v-model="form.addTime"
type="daterange"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
:default-value="defaultValue">
</el-date-picker>
</el-form-item>
export default {
data() {
let tool = this.tool
let _this = this
return {
form:{
time:[], //为时间范围段
addTime:[], //为最终选择的时间,组件绑定的时间
},
formRules:{
addTime:[{ required: true,message: '时间不能为空!', trigger: 'blur' }],
},
pickerOptions: {
disabledDate (time) {
let t = _this.tool.date.format(new Date(), "yyyy-MM-dd")
t= t+' 00:00:00'
let myDate = new Date(_this.form.time[0])
let year = myDate.getFullYear()
let month = myDate.getMonth()
let date = myDate.getDate()
if(_this.form.time[1]){
if(new Date(year, month, date).getTime() < new Date(t).getTime()){
return time.getTime() > new Date(_this.form.time[1]).getTime() || time.getTime() < new Date(t).getTime()
}
return time.getTime() > new Date(_this.form.time[1]).getTime() || time.getTime() < new Date(year, month, date).getTime()
}else {
if(new Date(year, month, date).getTime() < new Date(t).getTime()){
return time.getTime() < new Date(t).getTime()
}
return time.getTime() < new Date(year, month, date).getTime()
}
}
},
defaultValue:tool.date.format(new Date(),'yyyy-MM-dd'),
}
}
}