支持点击今天及之前任意日期,前后跨度不超过31天,且不超过今天

<el-date-picker
v-model="searchForm.dateRange"
type="daterange"
:clearable="false"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format = "yyyy-MM-dd"
:picker-options="pickerOptions"
></el-date-picker>

  

data() {
minDate:'',
maxDate:'',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.minDate = minDate
this.maxDate = maxDate
},
disabledDate: (time) => { //查询时间跨度为31天
if(this.minDate){
let range = 31 * 24 * 3600 * 1000
return time.getTime() > Date.now() || time.getTime() > (this.minDate.getTime() + range) || time.getTime() < (this.minDate.getTime() - range)
}
return time.getTime() > Date.now()
}
}
}

  

element-ui 中日期控件限制时间跨度的更多相关文章

  1. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  2. [原创] Web UI 自动化日期控件的处理

    序 在构建自动化套件的过程中,日期操作是一件很重要也很频繁的事情.有的日期控件的div层级结构复杂,同一个类型的日期控件在多个子系统中的表现形式也大相径庭.多数工程师为了避免重复的工作,会封装抽象一个 ...

  3. Qt中在UI文件中新建控件并命名,但在代码中无法识别UI中的控件?

    代码中添加FilePathLineEdit控件,显示标准文件选择对话框显示选择的文件路径,但在槽函数中ui->FilePathLineEdit->setText("FilePat ...

  4. 批量操作QT UI中的控件

    背景:在一个项目中,可能一个UI中存在大量相同的tablewidget,combobox,label等控件,每种可能有100个,此时想对它们进行同样的操作 方案:(以tablewidget为例,UI中 ...

  5. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  6. vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用

    其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...

  7. Element ui tree树形控件获取父节点id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  8. 【经验】Angularjs 中使用 layDate 日期控件

    layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...

  9. jQuery UI 日期控件--datepicker

    在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...

随机推荐

  1. LC 725. Split Linked List in Parts

    Given a (singly) linked list with head node root, write a function to split the linked list into k c ...

  2. centos6里面装zabbix(二)

    第一步: 如果这一步的时候有错误,那么修改php.ini(/usr/local/php/etc/这个目录下),然后重启php这个配置文件. 第二步: 第三步: 第四步: 第五步: 第六步:做到这一步的 ...

  3. 15.kubernetes认证及serviceaccount

    kubernetes认证及serviceaccount 认证 授权:RBAC(目前的主流授权方式) 准入控制:了解即可 --> 认证 授权 准入控制 客户端 -->api-server: ...

  4. spring cloud consul上下线体验

    spring cloud consul中默认会将spring.application.name作为ID 同一服务起多个实例时,ID默认会变成${spring.application.name}-${s ...

  5. spring-boot集成8:集成shiro,jwt

    Shrio是一个轻量级的,基于AOP 和 Servlet 过滤器的安全框架.它提供全面的安全性解决方案,同时在 Web 请求级和方法调用级处理身份确认和授权. JWT(JSON Web Token)是 ...

  6. SpringBoot配置文件可存放位置和加载顺序

    使用IDEA创建一个spring初始化项目后.默认的配置文件在resources文件夹下. SpringBoot启动时,会扫描application.properties或application.ym ...

  7. Prefix to Infix Conversion

    Infix : An expression is called the Infix expression if the operator appears in between the operands ...

  8. 红米K20PRO解锁Bootloader权限并刷入recovery

    手机里反正没什么东西了,聊天记录啊好像也没很重要得了,索性全部清除,刷机玩玩. 把稳定版刷成第三方开发版,这样又有时间去折腾root权限,面具和xposed的各种插件了,嘿嘿. 解锁小米手机 我的账号 ...

  9. Go语言Mac、Linux、Windows 下交叉编译

    在很多时候,由于开发的方便,会有这样的场景出现,使用Mac开发或使用Windows开发,需要编译成Linux系统的执行文件,那么如何做到?Go语言提供了非常方便的命令行操作,即可实现. 1.Mac下编 ...

  10. 利用requests提交相同名称数据的处理方法

    #字典键不能重复 data={ boardid' : boardid, 'divids[ ]' : '0' , 'divids[ ]' : '1' , 'divids[ ]' : '2' , } #这 ...