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的终止日期与起始日期关联的更多相关文章

  1. element UI datepicker组件限制可选日期范围

    长话短说,简单粗暴上代码了,在element中的datepicker,可以自由选择日期,如下: 然后我们根据element 官网的文档,给datepicker组件动态改变 picker-options ...

  2. Element UI DatePicker 时间跨度限制在同一个月内

    <el-date-picker :picker-options="pickerOptions" v-model="rangeTime" type=&quo ...

  3. element ui datePicker 设置当前日期之前的日期不可选

    pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7 } },

  4. Element UI - DatePicker 自定义日期选择期间

    <el-date-picker v-else v-model="searchForm.data_Selected" type="daterange" un ...

  5. element ui DatePicker 禁用当前日之前的时间

    <el-date-picker style="width:195px" value-format="yyyy-MM-dd" v-model="f ...

  6. vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用

    需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDa ...

  7. element UI+vue关于日期范围选择的操作,picker-options属性的使用

    一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...

  8. react项目中element的DatePicker回显

    element的DatePicker获取value的时候是日期对象如下,可以提交的时候查看参数 2019-06-30T17:02:02.000Z  如果是console.log打印出来的话,是这样的 ...

  9. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

随机推荐

  1. vue传值 ---- >> 子传父,$emit()

    划重点: $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数.   子组件:   1 <template& ...

  2. C++ //继承同名静态成员处理方式

    1 //继承同名静态成员处理方式 2 #include <iostream> 3 #include <string> 4 using namespace std; 5 6 cl ...

  3. CVE-2020-1472

    主要记下流程 我擦,这个洞mimikatz也可以搞 但是我就不记录了 检验漏洞是否存在 https://github.com/SecuraBV/CVE-2020-1472 先获取域控信息 然后测试能否 ...

  4. 十分钟带你了解CANN应用开发全流程

    摘要:CANN作为昇腾AI处理器的发动机,支持业界多种主流的AI框架,包括MindSpore.TensorFlow.Pytorch.Caffe等,并提供1200多个基础算子. 2021年7月8日,第四 ...

  5. 手把手和你一起实现一个Web框架实战——EzWeb框架(二)[Go语言笔记]Go项目实战

    手把手和你一起实现一个Web框架实战--EzWeb框架(二)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 上一篇文章我们实现了框架的雏形,基本地 ...

  6. 【vulapps】Sturcts2 S2-037RCE漏洞复现

    一.漏洞基本信息 S2-037官方公告 CVE编号:CVE-2016-4438漏洞名称:Struts(S2-037)远程代码执行漏洞发布日期:2016.615受影响的软件及系统:Apache stru ...

  7. 【工作篇】再次熟悉 SpringMVC 参数绑定

    前言 主要现在项目中使用的参数绑定五花八门的,搞得很头大,例如有些用字符串接收日期,用字符串接受数组等等,完全没有利用好 SpringMVC 的优势,这里自己也总结一下,免得到时又要百度谷歌查找. 以 ...

  8. zlib开发笔记(三):zlib库介绍、在ubuntu上进行arm平台交叉编译

    前言   方便做嵌入式arm的交叉移植zlib库.   Zlib库   zlib被设计为一个免费的,通用的,法律上不受限制的-即不受任何专利保护的无损数据压缩库,几乎可以在任何计算机硬件和操作系统上使 ...

  9. 【译】flutter中如何较好地实现隐藏和显示widget

    通常情况下,显示有四种情况: 1.(visible)显示 2.(invisible)隐藏: 这种隐藏是指在屏幕中占据空间,只是没有显示.这种情况出现场景如:用带有背景色的Container Widge ...

  10. 编写一个简单的COM组件

    参考网站:编写一个简单的COM组件_a ray of sunshine-CSDN博客 (1) 用MIDL编写.idl文件 //将以下代码保存成 IXIYIZ.idl 文件 //在命令行上进行编译,编译 ...