Many scenarios in the project use time range selection components:
At this time, what we chose too much was the el-date-picker component in element ui, but we also disliked the original ugliness of others.
So I choose to assemble it myself. Is there anyone who writes like me:
//页面组件
<el-col :span="6">
<el-date-picker
v-model="datePickerStart"
:disabled-date="disabledDateStart"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始时间" />
</el-col>
<el-col :span="1">
<div class="blockText">-</div>
</el-col>
<el-col :span="6">
<el-date-picker
v-model="datePickerEnd"
:disabled-date="disabledDateEnd"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束时间" />
</el-col>
//日期禁用方法
disabledDateStart(time) {
const beginDateVal = this.datePickerEnd;
if (beginDateVal) {
return (
time.valueOf() >=
new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
);
}
},
disabledDateEnd(time) {
const beginDateVal = this.datePickerStart;
if (beginDateVal) {
return (
time.valueOf() <=
new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
);
}
},
It is found that disabledDate is never triggered and the disabled method will not be entered. After thinking about it again and again, I read on the official website that it is not the Attributes of the component.
Haha, this is how it was used in the end:
<el-date-picker
v-model="datePickerStart"
type="date"
:picker-options="{ disabledDate: disabledDateStart }"
value-format="yyyy-MM-dd"
placeholder="开始时间"
/>
It can also be used like this
<el-date-picker
v-model="datePickerStart"
type="date"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
placeholder="开始时间"
/>
//在date里定义
data() {
return {
pickeroptions: {
disabledDate: time => {
const beginDateVal = this.datePickerEnd;
if (beginDateVal) {
return (
time.valueOf() >=
new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
);
}
}
},
datePickerStart: "",
datePickerEnd: "",
}
}
The first personal recommendation is in line with our daily logic