element-ui日期選擇器datepicker限制最大選擇日期范圍


如圖,需求為最多選擇范圍為七天

 <el-date-picker
        v-model="pickerDate"
        type="daterange"
        :picker-options="pickerOptions"
        @change="handlePickerDate"
        range-separator="至"
        format="yyyy-MM-dd"
        value-format="timestamp"
        start-placeholder="開始日期"
        end-placeholder="結束日期"
        align="right">
  </el-date-picker>
 timeOptionRange:null,

pickerOptions: {
        onPick :time =>{
              this.searchList.timeOptionRange = time.minDate
        },
        disabledDate :time =>{
              let timeOptionRange = this.searchList.timeOptionRange
              let seven = 3600 * 1000 * 24 * 6
              if(timeOptionRange){
                // /*選擇的日期 與 當前日期 小於7天*/
                let current =new Date(new Date().toLocaleDateString()) - timeOptionRange.getTime()
                return (time.getTime() > timeOptionRange.getTime()+ (current < seven?current:seven) ||
                  time.getTime() < timeOptionRange.getTime()-seven)
              }else {
                return time.getTime() > Date.now();
              }
            }]
  },             
handlePickerDate(e){
if(!e){
this.timeOptionRange = null
}
},
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM