elementui 时间范围选择器--动态限制时间范围

需求:elementUI中的时间范围选择组件,需要限制每次只能选择一年内的时间

组件:
<el-date-picker style="width:auto" v-model="form.daterange" type="daterange" :picker-options="pickerOptions" @change="changeDate" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"> </el-date-picker>


js:
data() {
    let _minTime = null
    let _maxTime = null
    return {
      pickerOptions: {
        onPick(time) {
          // 如果选择了只选择了一个时间
          if (!time.maxDate) {
            let timeRange = 365 * 24 * 60 * 60 * 1000; // 时间范围一次只能选1年内
            _minTime = time.minDate.getTime() - timeRange; // 开始时间
            _maxTime = time.minDate.getTime() + timeRange; // 结束时间
          } else {
            _minTime = _maxTime = null;
          }
        },
        disabledDate(time) {
          if (_minTime && _maxTime) {
            return time.getTime() < _minTime || time.getTime() > _maxTime;
          }
        }
      }
    }
posted @ 2021-11-01 14:20  icon-icon  阅读(62)  评论(0编辑  收藏  举报