element-ui 中日期控件限制时间跨度
支持点击今天及之前任意日期,前后跨度不超过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 中日期控件限制时间跨度的更多相关文章
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- [原创] Web UI 自动化日期控件的处理
序 在构建自动化套件的过程中,日期操作是一件很重要也很频繁的事情.有的日期控件的div层级结构复杂,同一个类型的日期控件在多个子系统中的表现形式也大相径庭.多数工程师为了避免重复的工作,会封装抽象一个 ...
- Qt中在UI文件中新建控件并命名,但在代码中无法识别UI中的控件?
代码中添加FilePathLineEdit控件,显示标准文件选择对话框显示选择的文件路径,但在槽函数中ui->FilePathLineEdit->setText("FilePat ...
- 批量操作QT UI中的控件
背景:在一个项目中,可能一个UI中存在大量相同的tablewidget,combobox,label等控件,每种可能有100个,此时想对它们进行同样的操作 方案:(以tablewidget为例,UI中 ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
- vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用
其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...
- Element ui tree树形控件获取父节点id
Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...
- 【经验】Angularjs 中使用 layDate 日期控件
layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...
- jQuery UI 日期控件--datepicker
在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...
随机推荐
- LC 802. Find Eventual Safe States
In a directed graph, we start at some node and every turn, walk along a directed edge of the graph. ...
- LC 901. Online Stock Span
Write a class StockSpanner which collects daily price quotes for some stock, and returns the span of ...
- Java线程池(Callable+Future模式)
转: Java线程池(Callable+Future模式) Java线程池(Callable+Future模式) Java通过Executors提供四种线程池 1)newCachedThreadPoo ...
- 启动eclipse导致Tomcat的配置文件重置
转: 启动eclipse导致Tomcat的配置文件重置 导入一个项目,需要在Tomcat的配置文件中配置JNDI数据源,需要修改Tomcat下的server.xml文件.但是当我们修改完后重启Tomc ...
- 常见 Web 性能优化方式
这篇文章是我阅读 Web Performance 101 之后的进行的粗糙的翻译作为笔记,英语还行的童鞋可以直接看原文. 这篇文章主要介绍了现代 web 加载性能(注意不涉及代码算法等),学习为什么加 ...
- 一、Node.js安装及环境配置之Windows篇
一.安装环境 1.本机系统:Windows 10 Pro(64位)2.Node.js:v6.9.2LTS(64位) 二.安装Node.js步骤 1.下载对应你系统的Node.js版本:https:// ...
- (企业面试)描述Linux系统的启动过程?
1简单描述(口头): 1.开机BIOS自检(检查硬件,cpu,主板,内存……) 2. MBR引导 硬盘 0 柱面 0 磁道 1 扇区的前446byte 3. grub 引导菜单 cat/etc/gr ...
- rocketMq消息的发送和消息消费
rocketMq消息的发送和消息消费 一.消息推送 public void pushMessage() { String message = "推送消息内容!"; try { De ...
- [转帖]【架构系列】龙芯loongson简介
[架构系列]龙芯loongson简介 https://blog.csdn.net/SoaringLee_fighting/article/details/97759305 2019年07月30日 10 ...
- [转帖]公钥基础设施(PKI)/CFSSL证书生成工具的使用
公钥基础设施(PKI)/CFSSL证书生成工具的使用 weilovepan520关注1人评论84344人阅读2018-05-26 12:22:20 https://blog.51cto.com/liu ...