选择一个日期区间,我们肯定会想到elementUI的日期区间控件,但是奈何我们需求就是不想要一下选择一个日期范围,而是分两次选择开始日期和结束日期,这样就需要做禁用判断了,比如你先选择开始日期,那你结束日期肯定要在开始日期之后,或者你先选择了结束日期,那你的开始日期只能选结束日期之前了:
如图:
代码如下:
// An highlighted block
<template>
<div class="date-wrapper">
<el-date-picker type="date" placeholder="选择开始日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" v-model="form.startTime"></el-date-picker>
<span style="padding: 0 1px">至</span>
<el-date-picker type="date" placeholder="选择结束日期" :picker-options="pickerOptions1" value-format="yyyy-MM-dd" v-model="form.endTime" ></el-date-picker>
</div>
</template>
<script>
const vm = this
export default {
name: "datePicker",
computed:{
pickerOptions() {
const that = this
return {
disabledDate(time) {
if(that.form.endTime && that.form.endTime !== ''){
return time.getTime() > new Date(that.form.endTime).getTime()
}
}
}
},
pickerOptions1() {
const that = this
return {
disabledDate(time) {
if(that.form.startTime && that.form.startTime !== ''){
return (time.getTime()+ 3600 * 1000 * 24) < new Date(that.form.startTime).getTime()
}
}
}
}
},
data() {
return {
form:{
startTime: '',
endTime: '',
}
}
}
}
</script>
<style lang="scss">
.date-wrapper{
display: flex;
justify-content: flex-start;
vertical-align: center;
.el-date-editor{
width: 102px !important;
.el-input__inner{
padding: 0px 0px 0 10px !important;
}
.el-input__prefix{
display: none;
}
.el-input__suffix{
text-align: right;
}
}
}
</style>