element-ui date-picker 設置結束時間大於等於開始時間且開始時間小於等於結束時間

Part.1  問題 

date-picker 組件在使用時，默認對時間是沒有限制的，可以隨便選擇區間，官方文檔添加了快捷選項，如：一周丶一月...

但是從用戶體驗方面出發，我們還是希望對時間進行有利的把控，如 我們的開始時間選定后，結束時間的可選區間應該大於或者等於開始時間，反之同理

Part.2  實現

HTML

<el-date-picker
        v-model="startTime"
        type="datetime"
        placeholder="開始日期"
        value-format="yyyy-MM-dd" format="yyyy-MM-dd"
        :picker-options="pickerOptionsStart"
        style="width:46%">
</el-date-picker>
<span> 至 </span>
<el-date-picker
        v-model="endTime"
        type="datetime"
        placeholder="結束日期"
        value-format="yyyy-MM-dd" format="yyyy-MM-dd"
        :picker-options="pickerOptionsEnd"
        style="width:46%">
</el-date-picker>

JS

export default {
    data() {
        return {
            startTime: '',
            endTime: '',

            pickerOptionsStart: {
                     disabledDate: time => {
                            if (this.endTime) {
                                 return time.getTime() > new Date(this.endTime).getTime()
                           }
                    }
             },
             pickerOptionsEnd: {
                      disabledDate: time => {
                            if (this.startTime) {
                                    return time.getTime() < new Date(this.startTime).getTime() - 86400000
                            }
                       }
             },
        }
   }
}

 

Part.3  效果