Element UI:DatePicker的终止日期与起始日期关联
Template
// 起始日期
<el-date-picker
v-model="queryParams.startTime"
:picker-options="lPickerOptions"
@change="lPickerChange" /> // 截止日期
<el-date-picker
v-model="queryParams.endTime"
:picker-options="rPickerOptions" />
Data
data: function () {
return {
// DatePick对象
queryParams: {
startTime: `${ new Date().getFullYear() }`,
endTime: `${ new Date().getFullYear() }`
},
// 起始日期 < 当前
lPickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
// 截止日期 < 当前 && 截止日期 > 起始日期
rPickerOptions: {
disabledDate(time) {
// 这里禁用条件使用“||”而不是“&&”
return time.getTime() < new Date(this.queryParams.startTime).getTime() - 86400000 || time.getTime() > Date.now();
},
},
}
}
Methods
// 监听起始日期输入事件
lPickerChange: function(e) {
let beginTime = new Date(e).getTime()
let endTime = new Date(this.queryParams.endTime).getTime()
// 当起始日期 > 截止日期 --> 截止日期 = 起始日期
if(beginTime > endTime) {
this.queryParams.endTime = e
}
},
其他UI框架同理。
- END -
Element UI:DatePicker的终止日期与起始日期关联的更多相关文章
- element UI datepicker组件限制可选日期范围
长话短说,简单粗暴上代码了,在element中的datepicker,可以自由选择日期,如下: 然后我们根据element 官网的文档,给datepicker组件动态改变 picker-options ...
- Element UI DatePicker 时间跨度限制在同一个月内
<el-date-picker :picker-options="pickerOptions" v-model="rangeTime" type=&quo ...
- element ui datePicker 设置当前日期之前的日期不可选
pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7 } },
- Element UI - DatePicker 自定义日期选择期间
<el-date-picker v-else v-model="searchForm.data_Selected" type="daterange" un ...
- element ui DatePicker 禁用当前日之前的时间
<el-date-picker style="width:195px" value-format="yyyy-MM-dd" v-model="f ...
- vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用
需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDa ...
- element UI+vue关于日期范围选择的操作,picker-options属性的使用
一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...
- react项目中element的DatePicker回显
element的DatePicker获取value的时候是日期对象如下,可以提交的时候查看参数 2019-06-30T17:02:02.000Z 如果是console.log打印出来的话,是这样的 ...
- 使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...
随机推荐
- vue传值 ---- >> 子传父,$emit()
划重点: $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数. 子组件: 1 <template& ...
- C++ //继承同名静态成员处理方式
1 //继承同名静态成员处理方式 2 #include <iostream> 3 #include <string> 4 using namespace std; 5 6 cl ...
- CVE-2020-1472
主要记下流程 我擦,这个洞mimikatz也可以搞 但是我就不记录了 检验漏洞是否存在 https://github.com/SecuraBV/CVE-2020-1472 先获取域控信息 然后测试能否 ...
- 十分钟带你了解CANN应用开发全流程
摘要:CANN作为昇腾AI处理器的发动机,支持业界多种主流的AI框架,包括MindSpore.TensorFlow.Pytorch.Caffe等,并提供1200多个基础算子. 2021年7月8日,第四 ...
- 手把手和你一起实现一个Web框架实战——EzWeb框架(二)[Go语言笔记]Go项目实战
手把手和你一起实现一个Web框架实战--EzWeb框架(二)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 上一篇文章我们实现了框架的雏形,基本地 ...
- 【vulapps】Sturcts2 S2-037RCE漏洞复现
一.漏洞基本信息 S2-037官方公告 CVE编号:CVE-2016-4438漏洞名称:Struts(S2-037)远程代码执行漏洞发布日期:2016.615受影响的软件及系统:Apache stru ...
- 【工作篇】再次熟悉 SpringMVC 参数绑定
前言 主要现在项目中使用的参数绑定五花八门的,搞得很头大,例如有些用字符串接收日期,用字符串接受数组等等,完全没有利用好 SpringMVC 的优势,这里自己也总结一下,免得到时又要百度谷歌查找. 以 ...
- zlib开发笔记(三):zlib库介绍、在ubuntu上进行arm平台交叉编译
前言 方便做嵌入式arm的交叉移植zlib库. Zlib库 zlib被设计为一个免费的,通用的,法律上不受限制的-即不受任何专利保护的无损数据压缩库,几乎可以在任何计算机硬件和操作系统上使 ...
- 【译】flutter中如何较好地实现隐藏和显示widget
通常情况下,显示有四种情况: 1.(visible)显示 2.(invisible)隐藏: 这种隐藏是指在屏幕中占据空间,只是没有显示.这种情况出现场景如:用带有背景色的Container Widge ...
- 编写一个简单的COM组件
参考网站:编写一个简单的COM组件_a ray of sunshine-CSDN博客 (1) 用MIDL编写.idl文件 //将以下代码保存成 IXIYIZ.idl 文件 //在命令行上进行编译,编译 ...