vue element-ui date-picker 日期選擇器控件 設置時間範圍 限制可選的開始時間和結束時間
總結一下日期控件實現開始日期、結束日期的選擇範圍限制，以便更符合實際情況。
需求：
1. 開始日期和結束日期都必須是今天之前；
2. 先選擇開始日期，那麼結束日期必須在開始日期之後，即只能選擇開始日期之後的日期；
3. 先選擇結束日期，那麼開始日期必須在結束日期之前，即只能選擇結束日期之前的日期；
三個條件是【且】的關係。
實現效果：
（ 注：小編操作和寫文日期5月27日）
實現代碼：
vue template 代碼：
<el-col :span="8"
><el-form-item
label="演練開始日期"
prop="startTime"
:rules="[{ required: true, message: '不能爲空', trigger: 'blur' }]"
>
<el-date-picker
v-model="addDrillRecordRow.startTime"
class="baseInput"
type="date"
placeholder="選擇日期"
format="yyyy 年 MM 月 dd 日"
:picker-options="pickerOptionsStart"
></el-date-picker></el-form-item
></el-col>
<el-col :offset="1" :span="8"
><el-form-item
label="演練結束日期"
prop="endTime"
:rules="[{ required: true, message: '不能爲空', trigger: 'blur' }]"
>
<el-date-picker
v-model="addDrillRecordRow.endTime"
class="baseInput"
type="date"
placeholder="選擇日期"
format="yyyy 年 MM 月 dd 日"
:picker-options="pickerOptionsEnd"
></el-date-picker></el-form-item
></el-col>
script 代碼
//時間限制，符合日期先後順序的實際情況
pickerOptionsStart: {
disabledDate: time => {
if (this.addDrillRecordRow.endTime) {
return (
time.getTime() > Date.now() - 8.64e6 ||
time.getTime() > this.addDrillRecordRow.endTime /*開始日期要在選擇的結束日期之前*/
);
}
// return time.getTime() < Date.now() - 8.64e7; /*今天及以後*/
return time.getTime() > Date.now() - 8.64e6; /*今天及之前，注意數字不一樣*/
}
},
pickerOptionsEnd: {
disabledDate: time => {
if (this.addDrillRecordRow.startTime) {
return (
time.getTime() > Date.now() - 8.64e6 ||
time.getTime() < this.addDrillRecordRow.startTime /*結束日期要在選擇的開始日期之後*/
);
}
return time.getTime() > Date.now() - 8.64e6; /*今天及之前*/
}
}
注：這裏的addDrillRecordRow是表單數據的綁定對象。
總結：
1. 這裏實現了日期控件的選擇範圍限制，時間選擇器和日期時間選擇器應該也可以類似實現。
2. 類似這種日期選擇的功能，在前端做限制處理是比較好的，優化了用戶體驗，如果放在後臺進行驗證，可能更加複雜。
還可以參考下面兩篇文章：
https://blog.csdn.net/weixin_43565820/article/details/89883512
https://www.jianshu.com/p/1804ac782e14
有問題歡迎來微信找我！一起學習成長，交個朋友！^_^
微信搜索：acoolgiser，或者直接掃描
