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