<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. Android笔记(五) Activity的启动模式

    Android中Activity是由返回栈来管理的,在默认情况下,每当启动一个新的Activity,它都会在返回栈中入栈,并且出于栈的顶端.但是有些时候Activity已经在栈的顶端了,也就不需要再启 ...

  2. testlink关联redmine设置

    Testlink关联Redmine 公司用testlink对测试用例进行维护,redmine关系项目及bug,所以为了方便期间,将Testlink关联Redmine,方便测试用例执行后,在redmin ...

  3. js基础知识2

    DOM Document Object Model 文档          对象       模型 对象: 属性和方法 属性:获取值和赋值 方法:赋值方法和条用方法 DOM树 document hea ...

  4. Git 的用法

    对于GIT  的用法,最近一直在寻找方法.网上也能找到一些方法.但是感觉说的不是很清楚,在这里我基于自己经验写一些. 对于任何一种方法都要安装GIT. 我是基于VS Code 2015 来做的. 在安 ...

  5. ReLU激活函数

    参考:https://blog.csdn.net/cherrylvlei/article/details/53149381 首先,我们来看一下ReLU激活函数的形式,如下图: 单侧抑制,当模型增加N层 ...

  6. vue 全局变量的处理方式

    vue项目中配置全局动态变量的方式:sessionStorage,vuex多个组件都会用到的公共的状态和方法(复用):vue 全局混入vue项目中配置全局静态变量的方式:vue 的原型链: globa ...

  7. linux其他

    1.安装上传下载指令 sz/rz yum install -y lrzsz 2.flask+gunicorn 代码更新升级部署 ps -ef | grep gunicorn 获取master进程 ki ...

  8. 第五章 CSS美化网页元素

    一.span标签:能让某几个文字或者某个词语凸显出来 <p> 今天是11月份的<span>第一天</span>,地铁卡不打折了 </p> 二.字体风格 ...

  9. kubernetes 部署metricserver

    本篇适用于kubeadm部署的k8s的集群 安装环境:首先要部署好k8s的集群,版本是1.11.1,我的虚拟机部署的,一个master节点,一个node节点.笔记本性能有限 下载metrics-ser ...

  10. bzoj 4240: 有趣的家庭菜园 树状数组+贪心

    有一个小性质:就是一个下标排列的最小移动次数就是逆序对数. 我们发现最终形态一定是一个波峰. 那么我们求的就是形成波峰的下标最少逆序对数. 考虑将元素从小到大依次插入. 那么,对于第 $i$ 个元素, ...