ElementUI日期选择器时间选择范围限制

liangzai_cool 发布于2019-08-26 14:01 / 844人阅读

Element是一套基于vue2.x的一个ui框架。官方文档也很详细，这里记录一个element-ui日期插件的补充
官方文档中使用picker-options属性来限制可选择的日期，下面举例补充：

单个日期时间输入框

组件代码：

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

两个日期时间输入框

组件代码：

情景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.ucloud.cn/yun/109977.html

开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 评论0 收藏0
element-ui 时间选择器限制范围（随动）

摘要：需求选择日期范围，但是选择范围需要在一周以内。方法考虑到有两种设计方式用两个独立时间选择器控制，实现起来比较混乱。用日期范围选择器。需求：选择日期范围，但是选择范围需要在一周以内。举个栗子：假设选第一个日期为1月17日，那么1月11日以前、1月23号以后的日期都需要设为禁选状态。方法：考虑到有两种设计方式：1、用两个独立时间选择器控制，实现起来比较混乱。2、用日期范围选择器。第一种...

xingqiba 2019-08-02 14:03 评论0 收藏0
element-ui 时间选择器限制范围（随动）

摘要：需求选择日期范围，但是选择范围需要在一周以内。方法考虑到有两种设计方式用两个独立时间选择器控制，实现起来比较混乱。用日期范围选择器。需求：选择日期范围，但是选择范围需要在一周以内。举个栗子：假设选第一个日期为1月17日，那么1月11日以前、1月23号以后的日期都需要设为禁选状态。方法：考虑到有两种设计方式：1、用两个独立时间选择器控制，实现起来比较混乱。2、用日期范围选择器。第一种...

ChristmasBoy 2019-08-23 14:36 评论0 收藏0