ElementUI el-date-picker 日期限制范围(和 一周)

1,793 阅读1分钟
  <!-- 日期 -->
     <el-date-picker v-model="mtRange" clearable range-separator="至" start-placeholder="定位开始日期" end-placeholder="定位结束日期" type="daterange" class="filter-item" :picker-options="pickerOptions" />

data() {
    return {
       pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()-(24 * 3600 * 1000) //减去一天的时间
         //return time.getTime() < Date.now() - 8.64e7; 或者
        }
      },
      mtRange:"",
    }
}

 <el-date-picker v-model="time" type="daterange" clearable range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期时间" size="mini" style="width: 220px" @change="timeChange" :picker-options="pickerOptions">
 </el-date-picker>
data() {
    let _minTime = null
    let _maxTime = null
    return {
      pickerOptions: {
        onPick(time) {
          // 如果选择了只选择了一个时间
          if (!time.maxDate) {
            let timeRange = 7 * 24 * 60 * 60 * 1000 // 7天
            _minTime = time.minDate.getTime() - timeRange // 最小时间
            _maxTime = time.minDate.getTime() + timeRange // 最大时间
            // 如果选了两个时间,那就清空本次范围判断数据,以备重选
          } else {
            _minTime = _maxTime = null
          }
        },
        disabledDate(time) {
          // onPick后触发
          // 返回false表示该日期禁选
          if (_minTime && _maxTime) {
            return time.getTime() < _minTime || time.getTime() > _maxTime
          }
        }
      },
      time: [],
    }
 }