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. SQL Server 行转列 列转行操作

    1.多行转成一行(并以','分开) 表数据如下图: 查询结果如下图: SQL查询脚本: SELECT addPer, house_code = (STUFF((SELECT ',' + house_c ...

  2. HCNA Routing&Switching之GVRP

    前文我们了解了不同vlan间路由相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15110336.html,今天我们来聊一聊vlan动态注册相关话题: ...

  3. Eclipse带参数调试的方法

    下面是体现带参数调试的一个代码demo,首先输出参数的数量,然后依次输出每个参数. public class ArgsEx { public static void main(String[] arg ...

  4. maven的setting配置远程仓库

    maven的setting,配置远程库. <mirror> <id>nexus-aliyun</id> <mirrorOf>central</mi ...

  5. DVWA(九):File Upload 全等级文件上传

    File Upload 文件上传,通常是由于对上传文件的类型没有进行严格的过滤.限制造成的,一般思路是 通过上传木马获取服务器的webshell(通过网络端口对网站服务器某种程度上的操作权限 也叫网站 ...

  6. Ajax 局部刷新 异步提交

    AJAX简介 局部刷新,异步提交. AJAX 不是新的编程语言,而是一种使用现有标准的新方法.它最大的有点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 浏览器朝后端发送请 ...

  7. GIT-版本管理-初阶使用

    目前我用的比较多的git指令 git clone -b [branch-name]: 拉取远程指定分支代码 git status: 查看工作区修改状态 在将修改添加进暂存区的时候需要git add . ...

  8. CSS3图片倒影技术

    http://bbs.itheima.com/thread-330315-1-1.html?wymlxt

  9. 踩坑记录之 -- String.IndexOf 在 .Net5 和 .Netcore3 中返回值不一样

    .Net Core3.1 下 运行此段代码 class Program { static void Main(string[] args) { // .NET Core 3.1 string s = ...

  10. Java常用类之时间类

    JDK8之前日期时间API 1. java.lang.System类 2. java.util.Date类 3. java.text.SimpleDateFormat类 4. java.util.Ca ...