pickerOptions为关键 在data() retrun 添加这段代码,后再设置html
data(){
return {
var vue = this;//为了在disabledDate中用到this
pickerOptions: {
//timeOptionRange:'',
disabledDate: time => {//this为当前日期控件不是页面,所以需要vue=this
if(vue.searchForm.tdate){
// 设置可选择的日期为今天之后的一个月内
let curDate = new Date(vue.searchForm.tdate).getTime();
// 这里算出一个月的毫秒数,
// 这里使用30的平均值, 实际中应根据具体的每个月有多少天计算;
let day = 30 * 24 * 3600 * 1000;
let dateRegionMax = curDate + day;
let dateRegionMin = curDate - day;
return (
time.getTime() > dateRegionMax || time.getTime() < dateRegionMin
);
}
},
onPick(time){//this为当前日期控件,不是页面,所以需要vue=this
//当第一时间选中才设置禁用
if(time.minDate && !time.maxDate){
vue.tdata = time.minDate;
}
if(time.maxDate){
vue.tdata = null;
}
}
},
//存储临时时间
tdata:null
}
}
templant
注意:picker-options="pickerOptions"
<el-date-picker
v-model="searchForm.date"
type="daterange"
range-separator="~"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>