element-ui 中日期控件限制时间跨度

 

支持点击今天及之前任意日期,前后跨度不超过31天,且不超过今天

<el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format = "yyyy-MM-dd"
            :picker-options="pickerOptions"
          ></el-date-picker>

  

data() {
      minDate:'',
      maxDate:'',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {         
         this.minDate = minDate
         this.maxDate = maxDate
        },
        disabledDate: (time) => { //查询时间跨度为31天
          if(this.minDate){
            let range = 31 * 24 * 3600 * 1000
            return time.getTime() > Date.now() || time.getTime() > (this.minDate.getTime() + range) || time.getTime() < (this.minDate.getTime() - range)
          }
          return time.getTime() > Date.now()
        }
      }
}

  

posted @ 2019-09-26 15:44  青春无敌小宇宙  阅读(2604)  评论(0编辑  收藏  举报