• 关于ElementUI中日期选择器时间选择范围限制


    1、组件代码

    <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions0">
    </el-date-picker>

    2、设置选择今天以及今天之后的日期

    data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7;
              }
            },  
       }     
    }

    3、设置选择今天以及今天以前的日期

    data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                return time.getTime() > Date.now() - 8.64e6
              }
            },  
       }     
    }

    4、设置选择今天之后的日期(不能选择当天时间)

    data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                return time.getTime() < Date.now();
              }
            },  
       }     
    }

    5、 设置选择今天之前的日期(不能选择当天)

    data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              }
            },  
       }     
    }

    6、设置选择三个月之前到今天的日期

    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;;
              }
            },  
       }     
    }

    7、两个输入框

    <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>

    限制结束日期不能大于开始日期

    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();
                    }
                },
        }      
    }
  • 相关阅读:
    Unity给力插件之MegaFiers
    序列化存档之备忘脚本
    09 Spring Cloud的集群保护框架Hystrix
    08 在Spring Cloud中使用Feign
    07 REST客户端
    06 RestTemplate负载均衡
    05 第一个Ribbon程序
    04 Ribbon介绍
    01 在IDEA的同一目录下创建多个项目
    03 Eureka集群的搭建
  • 原文地址:https://www.cnblogs.com/wxh0929/p/11672596.html
Copyright © 2020-2023  润新知