element DatePicker日期选择器控制可选时间段（一个月范围时间段）

 

 一、定义当前日期前后天数的日期函数

export const formatMomentDayStart = function (day) {
  return moment().startOf('day').subtract(day, 'days').valueOf()
}

export const formatMomentDayEnd = function (day) {
  return moment().endOf('day').subtract(day, 'days').valueOf()
}

二、组件

<el-date-picker
  v-model="filters.time"
  type="daterange"
  :default-time="['00:00:00', '23:59:59']"
  start-placeholder="操作开始时间"
  end-placeholder="操作截止时间"
  value-format="timestamp"
  :clearable="false"
  :picker-options="pickerOptions"
/>

三、Data

filters: {
  timeData: [this.formatMomentDayStart(30), this.formatMomentDayEnd(0)] // 默认日期可不设置
},
times:'' // 日期计算暂存字段
pickerOptions: {
  onPick: ({ maxDate, minDate }) => {
    this.times = minDate.getTime()
    if (maxDate) {
      this.times = ''
    }
  }, disabledDate: (time) => {
    if (this.times !== '') {
      const one = 31 * 24 * 3600 * 1000
      const minTime = this.times - one
      const maxTime = this.times + one
      return time.getTime() < minTime || time.getTime() > maxTime
    }
  }
}

四、实现

五、moment

moment.js使用文档：http://momentjs.cn/