<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. cdh的web管理界面503

    503 Service Unavailable No server is available to handle this request.       重启 agent  以及 server   

  2. Python_if语句

    1.if语句: color='红色' if color=='蓝色': print('我是蓝色') elif color=='红色': print('我是红色') else : print('未知') ...

  3. 数据库索引碎片——数据库sql

    文章:检测和整理索引碎片 文章:[笔记整理]SQL Server 索引碎片 和 重建索引 文章介绍了检查表的索引碎片百分比 文章:[小问题笔记(八)] 常用SQL(读字段名,改字段名,打印影响行数,添 ...

  4. css完结篇

    1.如何让一个绝对定位的盒子居中 left:50%; margin-left:-宽度的一半; 2.固定定位 position:fixed; 1.脱标 参考点:浏览器左上角 作用:固定导航栏,返回顶部, ...

  5. 轻院校赛-zzuli 2266: number【用每位的二进制的幂的和来进行hash(映射)处理】

    zzuli 2266: number 大致题意:   给定n,问有多少数对<x, y>满足: x, y∈[1, n], x < y            x, y中出现的[0, 9] ...

  6. P3205 [HNOI2010]合唱队[区间dp]

    题目描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需要将合唱队的人根据他们的身高排出一个队形.假定合唱队一共N个人,第i个人的身高为Hi米(1000<=Hi<= ...

  7. 【转】Senior Data Structure · 浅谈线段树(Segment Tree)

    本文章转自洛谷 原作者: _皎月半洒花 一.简介线段树 ps: _此处以询问区间和为例.实际上线段树可以处理很多符合结合律的操作.(比如说加法,a[1]+a[2]+a[3]+a[4]=(a[1]+a[ ...

  8. 1122 django中orm操作

    目录 1. 静态文件的配置 手动静态文件的访问资源 静态文件的动态绑定 2.request方法 2.1 请求方式 2.2 获取前端的请求方式 request.method 2.3 request方法 ...

  9. 前端学习笔记--CSS入门

    1.css概述: 2.css语法: 3.css添加方法: 用单独的文件存储css样式的优点: 优先级: h3得到的样式是内嵌样式覆盖了外部样式. 4.css选择器 标签选择器: 类别选择器: ID选择 ...

  10. SpringBoot项目启动报错:java.lang.RuntimeException: java.lang.reflect.InvocationTargetException

    .   ____          _            __ _ _ /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \( ( )\___ | '_ | '_| | ...