VUE:使Element-UI中DatePicker的终止日期不超过起始日期

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( ) 进行比较了

- END -

VUE:使Element-UI中DatePicker的终止日期不超过起始日期

上一篇:软件工程复习D8章(面向对象设计与分析)D7章


下一篇:11.配置swagger