日期选择器 限定可选范围

165 阅读1分钟
<el-form-item label="推广周期" :required="true" style="margin-bottom: 5px !important;">
  <el-date-picker size="large" value-format="yyyy-MM-dd" type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期" v-model="cycle" style="width: 250px"
                  :picker-options="pickerOptions"
                  @change="cycleChange">
   </el-date-picker>
</el-form-item>

data中-------------------------------------------------

pickerOptions: {
  onPick: ({ maxDate, minDate }) => {
    this.selectDate = minDate.getTime()
    if (maxDate) {
      this.selectDate = ''
    }
  },
  disabledDate: (time) => { // 禁止选择今天之前的日期 和未来一个月后的日期
    const today = new Date().toLocaleDateString()
    if (this.selectDate !== '') {
      const one = 30 * 24 * 3600 * 1000
      const minTime = this.selectDate - one
      const maxTime = this.selectDate + one
      return time.getTime() < minTime || time.getTime() > maxTime || time< new Date(today)
    }
  },

  // disabledDate: function(date) { // 禁止选择今天之前的日期
  //   const today = new Date().toLocaleDateString()
  //   return date < new Date(today)
  // }

},

methods中----------------------------------------------

cycleChange(val) {
  this.pushForm.startTime = val[0]
  this.pushForm.endTime = val[1]

  this.checkTime()
},