zoukankan      html  css  js  c++  java
  • element 中 datepicker设置,只能选中只能大于当前日期

    1.只能选择当前及以后的日期
    <el-date-picker
           v-model="value1"
           type="date"
           :picker-options="pickerOptions">
    </el-date-picker>
    
     data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
    }
    
    2.只能选择今天以及今天以前的日期
      data (){
       return {
           pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now() - 8.64e6
              }
            }, 
       }    
    }
    
    3.只能选择今天之后的日期
    
    data (){
       return {
           pickerOptions: {
              disabledDate(time) {
                return time.getTime() < Date.now();
              }
            },  
       }     
    }
    
    4.只能选择今天之前的日期
    data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              }
            },  
       }     
    }
    
    5.设置选择三个月之前到今天的日期
    data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                let curDate = (new Date()).getTime();
                let three = 90 * 24 * 3600 * 1000;
                let threeMonths = curDate - three;
                return time.getTime() > Date.now() || time.getTime() < threeMonths;;
              }
            }, 
       }    
    }
    组件代码
    
    <el-date-picker
           v-model="value1"
           type="date"
           placeholder="开始日期"
           :picker-options="pickerOptions0">
    </el-date-picker>
    <el-date-picker
           v-model="value2"
           type="date"
           placeholder="结束日期"
           :picker-options="pickerOptions1">
    </el-date-picker>
    
    情景1: 限制结束日期不能大于开始日期
    
    data(){
        return {
             pickerOptions0: {
                    disabledDate: (time) => {
                        if (this.value2 != "") {
                            return time.getTime() > Date.now() || time.getTime() > this.value2;
                        } else {
                            return time.getTime() > Date.now();
                        }
     
                    }
                },
                pickerOptions1: {
                    disabledDate: (time) => {
                        return time.getTime() < this.value1 || time.getTime() > Date.now();
                    }
                },
        }     
    }

    原文:https://www.cnblogs.com/alice626/p/11424661.html

  • 相关阅读:
    01 背包问题
    神奇的口袋[dp]
    2019考研西交大软件工程
    计算机考研有哪些值得推荐的院校?
    考研-政治经验贴***
    考研-英语经验贴2.0
    考研-作息时间安排表(总结)
    考研-英语经验贴(总结)
    考研-数学经验贴(总结)
    考研-专业课经验贴
  • 原文地址:https://www.cnblogs.com/huanhuan55/p/11970407.html
Copyright © 2011-2022 走看看