博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ElementUI日期选择器时间选择范围限制
阅读量:6983 次
发布时间:2019-06-27

本文共 1125 字,大约阅读时间需要 3 分钟。

  ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这里举例子稍做补充。

一、单个输入框的

//组件代码

  设置选择七天之前到今天的日期

data(){    return {        pickerOptions:{            disabledDate(time){                let _now = Date.now(),                    seven = 7 * 24 * 60 * 60 * 1000,                    sevenDays = _now - seven;                return time.getTime() > _now || time.getTime() < sevenDays;               //大于当前的禁止,小于7天前的禁止            }        }    }}

  这个return刚开始有点难理解,大致可以理解为time.getTime()就是里面的每个日期都会来遍及比较一遍,比当前时间大,为true,禁止;小于7天前的时间,为true,禁止。

二、两个输入框

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

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();            }        }    }}

 

转载地址:http://jztpl.baihongyu.com/

你可能感兴趣的文章
盒马鲜生颠覆传统生鲜市场的胜算几何?
查看>>
“无人化时代”正在逼近,网友:再不努力就无工可打啦!
查看>>
【Node】常用基础 API 整理
查看>>
传神成进博会唯一指定智能翻译硬件提供商 力助无障碍沟通
查看>>
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
查看>>
Java程序员须知:分布式微服务为什么很难?
查看>>
SQLServer之创建唯一聚集索引
查看>>
好程序员web前端技术之CSS3过渡
查看>>
java B2B2C源码电子商务平台 - Zuul回退机制
查看>>
记录Docker in Docker 安装(CentOS7)
查看>>
简单的写一个发布订阅器
查看>>
重学前端-js的类型问题
查看>>
Function类型
查看>>
Python学习
查看>>
你有多渴望赚钱
查看>>
ES6之let和const
查看>>
关于跨域
查看>>
一个半路出家的前端工程师的2018 | 掘金年度征文
查看>>
Fork/Join 框架介绍
查看>>
topK问题
查看>>