针对type="daterange"el-date-picker,对前后选择的日期范围有联动要求,可以这样做:

html

<el-date-picker :picker-options="pickerOptions" @change="dateChange" type="daterange"></el-date-picker>

js

// vue的data部分
// 假设开始时间和结束时间的范围前后不能超过3天
pickerOptions: {
  onPick: obj => {
    this.pickerMinDate = new Date(obj.minDate).getTime();
  },
  disabledDate: time => {
    if (this.pickerMinDate) {
      // 只在选择第一个时间以后才做限制
      const day =  3 * 24 * 3600 * 1000
      const maxTime = this.pickerMinDate + day
      const minTime = this.pickerMinDate - day
      return time.getTime() > maxTime || time.getTime() < minTime;
    } else {
      // 未做选择时不做限制
      return false;
    }
  }
},

// vue的methods部分
// 每次change之后要清空限制,让以后选择都可以从全新的状态开始
dateChange() {
  this.pickerMinDate = null
},

以上为2020年9月14日更新


使用Element-UI进行业务开发时可能会遇到选择“开始日期”“结束日期”的需求:

为了保证数据符合真实情景,需要对其做进一步的限制:开始日期不能晚于结束日期、结束日期不能早于开始日期。下图被置灰的日期表示不能选择:

开始日期需早于结束日期
结束日期需晚于开始日期

思路

监听开始日期选择器的聚焦事件(@focus),判断结束日期是否已选,是,将开始日期选择器的可选值范围(:picker-options)设成小于等于结束日期,否,不做限制(即可以随意选);同理,监听结束日期选择器的聚焦事件,判断开始日期是否已选,是,将结束日期选择器的可选值范围设成大于等于开始日期,否,不做限制。

实现方法

html

<!--省略其他属性,只保留:picker-options和@focus-->

<!--开始日期-->
<el-date-picker :picker-options="startPickerOptions" @focus="startDateFocus" />

<!--结束日期-->
<el-date-picker :picker-options="endPickerOptions" @focus="endDateFocus" />

js

data () {
  return {
    startDate: '',
    endDate: '',
    startPickerOptions: {},
    endPickerOptions: {},
  }
},

methods: {
  stringDateToTimestamp(stringDate) {
    return Date.parse(new Date(stringDate));
  },
  startDateFocus() {
    let endDate = this.endDate;
    if (!endDate) return;
    let that = this;
    that.startPickerOptions = {
      disabledDate(time) {
        return time.getTime() >= that.stringDateToTimestamp(endDate) - 1 * 24 * 3600 * 1000;
      },
    };
  },
  endDateFocus() {
    let startDate = this.startDate;
    if (!startDate) return;
    let that = this;
    that.endPickerOptions = {
      disabledDate(time) {
        return time.getTime() <= that.stringDateToTimestamp(startDate);
      },
    };
  },
},

0
分类: vue
浏览:514

0 条评论

发表评论

电子邮件地址不会被公开。

你必须允许浏览器启用JavaScript才能看到验证码

Scroll Up