Template
// 起始DatePicker <el-form-item prop="name" label="起始年月"> <el-date-picker :picker-options="lPickerOptions" @change="lPickerChange" /> </el-form-item> // 截止DatePicker <el-form-item prop="name" label="截止年月"> <el-date-picker :picker-options="lPickerOptions" /> </el-form-item>
Data
data: function () { return { // 储存起始日期变化 lPickerData: 0, // 起始日期禁用项 lPickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); }, }, // 截止日期禁用项 rPickerOptions: { disabledDate(time) { // 这里禁用条件使用“||”而不是“&&” return time.getTime() < this.lPickerData || time.getTime() > Date.now(); }, }, } }
Methods
// 监听起始日期改变
lPickerChange: function(e) {
// 这里减去 1 day = 86400000 ms, 为了避免选择起始时间后,截止时间不能选择同一天内的情况。
this.lPickerData = new Date(e).getTime() - 86400000
},
* 饿了么DatePicker提供的监听到的参数是 2021-06-23 这样的格式,因此这里用到 new Date( ) 将数据变更为 Wed Jun 23 2021 17:45:56 GMT+0800 (中国标准时间) ,然后再使用 getTime( ) 方法将数据转化成时间戳(ms级),就可以与 pickerOption 中 disableDate 返回的 time.getTime( ) 进行比较了