<el-date-picker  v-model="seach.before" type="date" placeholder="开始时间"  value-format="yyyy-MM-dd" class="wida" :picker-options="pickerBeginDateBefore"  @change="changeTime">
</el-date-picker>
<span class="zhi">至</span>
<el-date-picker v-model="seach.after" type="date" placeholder="结束时间"value-format="yyyy-MM-dd" class="wida" :picker-options="pickerBeginDateAfter">
</el-date-picker>
seach:{
before:'',
after:'',
},
// 开始时间不大于结束时间
// 开始时间
pickerBeginDateBefore: {
disabledDate: (time) => {
let beginDateVal = this.seach.after;
if (beginDateVal) {
return time.getTime() > beginDateVal;
}
}
},
// 结束时间
pickerBeginDateAfter: {
disabledDate: (time) => {
let beginDateVal = this.seach.before;
if (beginDateVal) {
return time.getTime() < beginDateVal;
}
}
},
//选择开始时间,清空结束时间
changeTime(date){
// this.seach.before="";
// console.log(this.seach.before)
this.pickerBeginDateAfter={
disabledDate(time) { //开始时间-结束时间
return (time.getTime() < new Date(date).getTime());
}
}
},

来源:https://www.cnblogs.com/M-miao/p/9838727.html   element ui组件的开始时间-结束时间验证

element ui组件的开始时间-结束时间验证的更多相关文章

  1. vue问题五:element ui组件的开始时间-结束时间验证

    <el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...

  2. JS时间戳比较大小:对于一组时间戳(开始时间~结束时间)和另一组时间戳进行比较,用于判断被比较时间戳组是否在要求范围内

    /* *JS时间戳比较大小:对于一组时间戳(开始时间~结束时间)和另一组时间戳进行比较,用于判断被比较时间戳组是否在要求范围内 *@param date1 date2(形如:'2015-01-01'类 ...

  3. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  4. java根据开始时间结束时间计算中间间隔日期

    public static void main(String[] args) throws Exception { String beginDate = "2016-07-16"; ...

  5. element ui 日期控件范围时间限制记录、以及计算两个日期之间的天数

    日期的筛选经常会有最小的日期选择,例如:当前日期 :clearable="false" :picker-options="pickerOptions0" val ...

  6. vue-cli按需引入Element UI组件

    一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...

  7. bootstrap-datepicker 开始时间-结束时间 thinkphp

    <!DOCTYPE html> <head> <title>开始-结束时间测试</title> </head> <body> & ...

  8. Element UI组件说明

    -<el-card>-查询及展示列表页面-[v-show]属性控制显示隐藏-<el-card class="box-card" >-多标签页面-<el ...

  9. php 本周开始时间和结束时间;本月开始时间结束时间;上月开始时间结束时间

    <?php /** * 功能:取得给定日期所在周的开始日期和结束日期 * 参数:$gdate 日期,默认为当天,格式:YYYY-MM-DD * $first 一周以星期一还是星期天开始,0为星期 ...

随机推荐

  1. Python基础——运行机理

    Python解释器 从Python这门编程语言的实现上来讲,Python是一个名为解释器的软件包,包含:一个解释器 和 支持的库 解释器又有不同版本:CPython.Jython.IronPython ...

  2. subprocess、struct模块的简单应用与ssh模型(黏包)

    一.subprocess模块 #可以通过传递字符串命令,帮你去实现一些操作系统的命令. import subprocess res = subprocess.Popen("dir" ...

  3. 安装Genymotion模拟器(第三方)

    优势: 启动速度更快 注册账户,下载可用的系统镜像,就可以使用.     官方网站: https://www.genymotion.com/account/login/ 选择的版本是带VirtualB ...

  4. redis五中数据类型

    MySql+Memcached架构的问题 实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都曾经使用过这样的架构,但随着业务数据量的不断增加 ...

  5. 简介WEB应用服务器TONCAT

    1.HTTP与Tomcat简介1.1 什么是Http协议HTTP,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的 一种网络协议.所有的WWW文件都必须 ...

  6. 使用unittest测试(基础一)

    #导入unittest单元测试框架 ##用例的方法前缀必须要以 test 开头的 #这是用来组织用例的 import unittest class TestDBQB(unittest.TestCase ...

  7. 没有向ZK写offset数据

    两天公司要学习kafka,结合之前的storm,做了一个简单的集成,之前也参考了网上的例子一些例子,发现或多或少都有一些问题.所以自己做了一个. 这个是网上其他人遇到的问题,给摘录一下,防止以后自己和 ...

  8. [Dart] final vs const

    void main() { ; print(a); ; print(b); final c = 'Hello'; // c = 'Hello again'; // Uncomment to throw ...

  9. OTFS Research Notes

    △f = f·v·cosθ/c,f表示载波频率,5G/B5G朝着毫米波等高频段方向发展,因此多普勒拓展的影响将更显著.此外,Masssive MIMO的现有规模已达256维度,并将朝着上千的规模发展. ...

  10. 普通页面引入React(使用和不使用JSX)

    1. 不使用JSX 优点: 不用配置有关JSX的编译. 依赖语法: React.createElement(component/type, props, ...chilidren); //第一个参数可 ...