zoukankan      html  css  js  c++  java
  • 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();
          }
        }
    }
  • 相关阅读:
    TP实例化模型的两种方式 M() D()
    implode 函数 把数组拼接成字符串
    用array_search 数组中查找是否存在这个 值
    SVN-001
    PHP-006
    Access数据操作-02
    Access数据操作-01
    Html解析
    浏览器Chrome对WebGL支持判断
    浏览器渲染模式设置
  • 原文地址:https://www.cnblogs.com/jimmyLei/p/13896176.html
Copyright © 2011-2022 走看看