1. 程式人生 > 其它 >【Vue-UI框架開發技巧】Element UI 日期選擇器,限制只能選擇N天內

【Vue-UI框架開發技巧】Element UI 日期選擇器,限制只能選擇N天內

技術標籤:Vue-UIelementui

關鍵的配置:配置pickerOptions下的onPick和disabledDate

<el-date-picker
    v-model="dateRange"
    :picker-options="pickerOptions"
    type="daterange"
    range-separator="至"
    start-placeholder="開始日期"
    end-placeholder="結束日期">
</el-date-picker>

pickerOptions配置:

pickerMinDate:'',
dateRange: [],
pickerOptions:{
    onPick: ({ maxDate, minDate }) => {
        this.pickerMinDate = minDate.getTime()
        if (maxDate) {
            this.pickerMinDate = ''
        }
    },
    disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
              const day5 = 5 * 24 * 3600 * 1000
              let maxTime = this.pickerMinDate + day5
              let minTime = this.pickerMinDate - day5
              return time.getTime() > maxTime || time.getTime() < minTime
          }
     }
},