zoukankan      html  css  js  c++  java
  • ElementUI日期选择器时间选择范围限制

    单个日期时间输入框

    组件代码:
    <el-date-picker
           v-model="value1"
           type="date"
           placeholder="选择日期"
           :picker-options="pickerOptions0">
    </el-date-picker>
    情景1: 设置选择今天以及今天之后的日期
    data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7;
              }
            },  
       }     
    }   
    情景2: 设置选择今天以及今天以前的日期
    data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                return time.getTime() > Date.now() - 8.64e6
              }
            },  
       }     
    } 
    情景3: 设置选择今天之后的日期(不能选择当天时间)
    data (){
       return {
           pickerOptions0: {
              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();
                    }
                },
        }      
    }

    如果报错:date.getHours is not a function 赋值上去的没有时分秒,加上就好了。(HH:mm:ss:)
  • 相关阅读:
    实验教学管理系统 c语言程序代写源码下载
    模拟游客一天的生活与旅游java程序代写源码
    Java作业代写
    快餐店运行模拟C++程序源码代写
    HTML+CSS实例——漂亮的背景(一)
    HTML+CSS实例——漂亮的查询部件(一)
    求可能组合VB源码代写
    专业程序代写
    (重刷)HDU 1874 畅通工程续 + HDU 2544 最短路 最短路水题,dijkstra解法。
    价值链与项目组模式打通专业管理模式的竖井
  • 原文地址:https://www.cnblogs.com/PoisonousMushrooms/p/11972088.html
Copyright © 2011-2022 走看看