功能：選了開始時間，則結(jié)束時間只能選擇開始時間之后的；選了結(jié)束時間，則開始時間只能選擇結(jié)束時間之前的? ?重點是picker-options屬性
?圖示：
?
?文章來源：http://www.zghlxwxcb.cn/news/detail-625135.html
代碼展示:
// body 內(nèi)部
<el-form-item>
<el-date-picker
v-model="startCheckTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="請選擇開始時間"
:picker-options="startPickerOptions"
>
</el-date-picker>
</el-form-item>
<div class="texts">
至
</div>
<el-form-item>
<el-date-picker
v-model="endCheckTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="請選擇結(jié)束時間"
:picker-options="endPickerOptions"
>
</el-date-picker>
</el-form-item>
// js內(nèi)容
computed:{
startPickerOptions() {
const that = this;
return {
disabledDate(time) {
if (that.endCheckTime) { // 如果有結(jié)束時間 這結(jié)束時間之后的都不能選
return (
time.getTime() > new Date(that.endCheckTime).getTime()
);
}
},
}
},
endPickerOptions() {
const that = this;
return {
disabledDate(time) {
if (that.startCheckTime) { // 如果有開始時間 這開始時間之前的都不能選
return (
time.getTime() < new Date(that.startCheckTime).getTime() - 8.64e7
);
}
},
}
},
}?文章來源地址http://www.zghlxwxcb.cn/news/detail-625135.html
到了這里，關于vue+element中如何設置單個el-date-picker開始時間和結(jié)束時間關聯(lián)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
