先选择开始日期,控制结束日期的选择范围
先选择开始日期,控制结束日期的选择范围
<div class="wrap_box">
<div class="wrap_boxtit">选择日期:</div>
<div class="wrap_boxinp">
<el-date-picker style="width:150px;"
v-model.trim="startData"
type="date"
clearable
value-format="yyyy-MM-dd"
@change="change()"
:picker-options="pickerOptionsStart"
placeholder="开始日期">
</el-date-picker>
</div>
<div style="line-height:40px;padding: 0 5px;">—</div>
<div class="wrap_boxinp">
<el-date-picker style="width:150px;"
v-model.trim="endData"
type="date"
clearable
value-format="yyyy-MM-dd"
@change="change()"
:picker-options="pickerOptionsEnd"
placeholder="结束日期">
</el-date-picker>
</div>
</div>
data() {
return {
startData: "",
endData: "",
pickerOptionsStart: {
disabledDate:(time)=>{
if (this.endData) {
var endTime = new Date(this.endData).valueOf();
}
// var startTime = Date.now() - 8.64e7;
// return (
// (time && time.valueOf() < startTime) ||
// time.valueOf() > endTime
// );
return time.valueOf() > endTime;
},
},
pickerOptionsEnd: {
disabledDate:(time)=>{
if (this.startData) {
// 让用户可以选择开始结束同一天
var startTime =
new Date(this.startData).valueOf() - 8.64e7 + 1;
} else {
// var startTime = Date.now() - 8.64e7;
return false;
}
return time && time.valueOf() < startTime;
},
},
};
},