需要:搜索选择查询日期,开始时间需要小于结束时间,结束时间要受限开始时间。
效果如图所示
代码如下:
HTML部分:
<div class="demo-input-suffix">
<span class="title">转预算时间:</span>
<el-date-picker
:editable="false"
v-model="startBudgetTime"
:picker-options="pickerOptionsStart"
size="mini"
type="datetime"
value-format="timestamp"
format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始日期"
@change="changeEnd"/>-
<el-date-picker
:editable="false"
v-model="endBudgetTime"
:picker-options="pickerOptionsEnd"
size="mini"
type="datetime"
value-format="timestamp"
format="yyyy-MM-dd HH:mm:ss"
default-time="['23:59:59']"
placeholder="选择结束日期"
@change="changeStart"/>
</div>
js部分
export default {
data() {
return {
// 限制开始时间
pickerOptionsStart: {},
pickerOptionsEnd: {},
startBudgetTime: '', // 预算开始时间
endBudgetTime: '', // 预算结束时间
}
},
methods: {
// 结束时间限制开始时间
changeStart() {
if (!this.endBudgetTime) {
this.pickerOptionsStart = {
disabledDate: {}
}
return
}
this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
// 可通过箭头函数的方式访问到this
disabledDate: (time) => {
var times = ''
times = time.getTime() > this.endBudgetTime
return times
}
})
},
// 开始时间 控制结束时间
changeEnd() {
if (!this.startBudgetTime) {
this.pickerOptionsEnd = {
disabledDate: {}
}
return
}
this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
disabledDate: (time) => {
return time.getTime() < this.startBudgetTime
}
})
},
}
}