<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. VS代码自动排版

    1, ctrl+a 2, ctrl+k 3, ctrl+f

  2. Linux学习之五-Linux系统终端常用的快捷键

    Linux系统终端常用的快捷键 (使用快捷键能大大提高效率,部分用在远程登录的工具如Xshell下) 剪切板操作(终端不支持,因为终端是纯命令行) Ctrl+insert     复制 Shift+i ...

  3. Windows Server 2016 IIS的安装与配置

    1. 打开服务器管理器,点击[添加角色和功能选项].        2. 进入“添加角色和功能向导”页面,点击下一步. 3. 安装类型选择[基于角色或基于功能的安装],点击下一步. 4. 进入服务器选 ...

  4. 脚本shell

    vim删除以#,空格开头的行   1,删除以#号开头的行: :g/^#/d :%s/^#.*\n 2,删除以空格开头的行: :g/^\s/d                “\s代表空格” :%s/^ ...

  5. DOORS 和Reqtify — 需求管理和需求追溯工具

    IBM Rational DOORS 可实现对整个产品的全生命周期需求管理,覆盖从需求.到设计以及测试阶段.是一款具有广泛使用的企业级专业需求管理工具.DOORS 可以将项目开发过程中产生的各级需求和 ...

  6. centos 下 sphinx安装和配置

    一.安装前提必备先安装工具 yum -y install make gcc g++ gcc-c++ libtool autoconf automake imake mysql-devel libxml ...

  7. sql server 存储过程---游标的循环

    sqlserver中的循环遍历(普通循环和游标循环) sql 经常用到循环,下面介绍一下普通循环和游标循环 1.首先需要一个测试表数据Student

  8. 012_Python3 斐波纳契数列 + end 关键字

    1.个斐波纳契数列. #!/usr/bin/python3   # Fibonacci series: 斐波纳契数列 # 两个元素的总和确定了下一个数 a, b = 0, 1 while b < ...

  9. jQuery获取元素的方式

    一.通过id选择器获取并操作元素--------$("#id属性的值") <script src="http://libs.baidu.com/jquery/1.1 ...

  10. SD六校联考二轮

    数据差评 D1T1 string 直接模拟 每次 string_u = const_string + string_v 理论得分 30 实际可得 100 D2T1 n^2 理论得分 30 实际可得 1 ...