1. 程式人生 > 實用技巧 >vue 時間元件限制選擇範圍

vue 時間元件限制選擇範圍

<el-date-picker
          v-model="searchData.params[search.value]"
          type="date"
          :placeholder="search.placeholder"
          :pickerOptions="search.pickerOptions"
          :value-format="search.valueFormat">
</el-date-picker>

pickerOptions 值

choiceDate:null,
pickerOptions:{
 onPick: ({ maxDate, minDate }) => {
   // 把選擇的第一個日期賦值給一個變數。
   this.choiceDate = minDate.getTime();
   // 如果選擇了兩個日期了,就把變數設定空
   if (maxDate) this.choiceDate = "";
  },
 disabledDate: time => {
    if (this.choiceDate) {
        // 7天的時間戳
        const one = 7 * 24 * 3600 * 1000;
        // 當前日期 - one = 7天之前
        const minTime = this.choiceDate - one;
        // 當前日期 + one = 7天之後
        const maxTime = this.choiceDate + one;
        return (
            time.getTime() 
< minTime || time.getTime() > maxTime || // 限制不能選擇今天及以後 time.getTime() + 1 * 24 * 3600 * 1000 > Date.now() ); } else { // 如果沒有選擇日期,就要限制不能選擇今天及以後 return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now(); } } }