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();
      }
    }
}

 


免責聲明!

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



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