需求是开始结束日期不得大于当前时间,当开始日期发生变化时,结束日期不得小于开始日期且不得大于当前日期

<el-form-item label="开始日期:">
<el-date-picker
size="mini"
v-model="form.startDate"
value-format="yyyyMMdd"
type="date"
placeholder="选择开始日期"
:picker-options="pickerBeginDateBefore"
@change="changeTime"
></el-date-picker>
</el-form-item>
<el-form-item label="结束日期:">
<el-date-picker
size="mini"
v-model="form.endDate"
value-format="yyyyMMdd"
type="date"
placeholder="选择结束日期"
:picker-options="pickerBeginDateAfter"
></el-date-picker>
</el-form-item>
data数据展示如下:
// 开始时间disabled
pickerBeginDateBefore: {
disabledDate: time = > {
return time.getTime() > Date.now();
}
},
// 结束时间disabled
pickerBeginDateAfter: {
disabledDate: time = > {
return time.getTime() > Date.now();
}
}, 方法: changeTime() {
let self = this;
self.form.endDate = '';
self.pickerBeginDateAfter = {
disabledDate(time) {
let timeyear = time.getFullYear();
let timemonth = time.getMonth() + 1;
if (timemonth >= 1 && timemonth <= 9) {
timemonth = '0' + timemonth;
}
let timeday = time.getDate();
if (timeday >= 1 && timeday <= 9) {
timeday = '0' + timeday;
}
let currentTime = timeyear.toString() + timemonth.toString() + timeday.toString();
if (currentTime < self.form.startDate || currentTime > self.currentDate) {
return true;
}
}
};
},
getCurrentTimeStr() {
var currentDate = new Date();
var currentTimeStrBefore = null;
var currentTimeStr = null;
var year = currentDate.getFullYear().toString();
var month = (currentDate.getMonth() + 1).toString();
var date = currentDate.getDate().toString();
var dateBefore = (currentDate.getDate() - 1).toString();
currentTimeStrBefore = year + month + dateBefore;
currentTimeStr = year + month + date;
this.currentDate = currentTimeStr;
this.form.startDate = currentTimeStrBefore;
this.form.endDate = currentTimeStr;
},

elementUI 选择开始结束日期加限制的更多相关文章

  1. winform datetimepacker 开始日期 结束日期 分类: WinForm 2014-07-15 19:14 124人阅读 评论(0) 收藏

    dtpStart;//开始日期 dtpEnd;//结束日期 1:开始日期小于结束日期 加载dtpEnd的ValueChanged事件即可. //开始日期小于结束日期         private v ...

  2. elementui限制开始日期和结束日期

    项目需求:开始日期和结束日期 禁用当前日期之前的日期.同时结束日期 禁用开始日期之前的日期 <div class='startTime'> 开始时间:<el-date-picker ...

  3. ElementUI】日期选择器时间选择范围限制,只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期

    <el-date-picker v-model="value1" type="date" placeholder="选择日期" :pi ...

  4. java 和 mysql 获取周 星期 的第一天 最后一天 或者 月的 日期(字符串转日期,日期转字符串,日期加减)

    获取周的第一天,最后一天 System.out.println(getStartEndDate("2016-05-01", 1)); 获取星期的第一天和最后一天 System.ou ...

  5. 结束日期必须大于开始日期--My97DatePicker日历控制的又一方便之处

    在做时间查询时,有时需要两个日期,从一个日期到另外一个日期的那种,但是这样会有一个问题,比如后者的结束日期晚于开始日期怎么办?用JS写验证,麻烦,呵呵,用这个日历控件,可方便实现结束日期只显示开始日期 ...

  6. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

  7. my97datepicker开始日期小于结束日期格式化时间精确届时分秒

    my97datepicker开始日期小于结束日期格式化时间精确到时分秒 一 , 需求: 结束时间 > 开始时间, 不符合的时间段不能选择.比如我选择开始日期是7月28,那结束的日期将只能从7月2 ...

  8. jquery中使用datepicker限制开始日期小于结束日期

    这里是使用Jquery插件实现的,这段代码来自于网络.感觉很实用,就做笔记记录下来. 原文:http://blog.csdn.net/tianyacao8025/article/details/707 ...

  9. PHP计算每月几周,每周的开始结束日期

    PHP计算每月几周,每周的开始结束日期 因为项目中需要一个每周工作计算的功能,具体日期的算法是,把每月拆分成几个周,最后一个星期这个月份的天数不够就补上下个月的. 列如今天8月27星期一,这个月有31 ...

  10. js 处理日期加减

    js 处理日期加减 开始时间设置为6点整,若当前时间小于6:00:00,则使用T-1,否则使用T 结束时间设置为T+1的6点整 Date.prototype.format = function(fmt ...

随机推荐

  1. [python][selenium] Web UI自动化页面切换iframe框架

    关联文章:Web UI自动化8种页面元素定位方式 1.切换iframe的方法:switch_to.frame  入参有4种:  1.1.id  1.2.name  1.3.index索引  1.4.i ...

  2. Openstack-删除卷:您被禁止执行 删除卷 (僵尸卷)

    您被禁止执行 删除卷 (僵尸卷) 您被禁止执行 删除卷: 7f23a26a-27f2-4504-9191-0f5630a5bff5, 卷一直在创建,但实例已经被删除了 [root@controller ...

  3. Qt 中实现异步散列器

    [写在前面] 在很多工作中,我们需要计算数据或者文件的散列值,例如登录或下载文件. 而在 Qt 中,负责这项工作的类为 QCryptographicHash. 关于 QCryptographicHas ...

  4. C# .net 6 Log4net 安装、配置 以及相关问题处理

    安装log4net 首先下载相关Nuget包 安装的时候注意项目的.net版本,我这里使用的是.net 6 在根目录下面新建一个配置文件 log4net.config,并且添加下面相关配置项目 < ...

  5. 【倒计时3天】“CSIG企业行”走进合合信息,大咖解密智能文档处理背后的底层技术及AI未来展望

    3月18日,由中国图象图形学会(CSIG)主办,合合信息.CSIG文档图像分析与识别专业委员会联合承办的"CSIG企业行"系列活动将正式举办,通过搭建学术界与企业交流合作平台,为企 ...

  6. JavaScript – Function 函数

    参考 阮一峰 – 函数的扩展 基本用法 function fn1(param1, param2 = 'default value') { return 'return value'; } fn1('1 ...

  7. ASP.NET Core C# 反射 & 表达式树 (第二篇)

    前言 上一篇讲到了各种反射的操作方式, 这一篇主要说说如何找到类型. Type Information 在找类型的时候, 除了依据简单的 string 以外, 还会用到很多类型属性来做判断. 比如它是 ...

  8. ASP.NET Core – MVC vs Razor Page

    前言 早年只有 MVC, Razor Page 是后来才出现的. 一开始其实我很看不起 Razor Page, MVC 能做的东西为什么要搞多一个 Razor Page 来做呢? 但我还是尝试用了起来 ...

  9. Ubuntu 64系统编译android arm64-v8a 的openssl静态库libssl.a和libcrypto.a

    #!/bin/bash # Cross-compile environment for Android on ARM64 and x86 # # Contents licensed under the ...

  10. kali系统安装和CVE-2017-12615测试

    1 安装kali系统 1.1 下载VMware压缩包 kali-linux-2022.1 默认的用户和密码是kali 1.2 初始化系统 sudo apt update -y #kali sudo a ...