备注:设置开始时间小于结束时间

               <!-- 开始时间 -->
<div class="block">
<!-- <span class="demonstration">开始时间</span> -->
<el-date-picker
v-model="startTime"
type="date"
placeholder="选择开始日期"
:picker-options="pickerOptionsStart">
</el-date-picker>
</div>
<span style="color: #333333;font-size: 14px;">至</span>
<!-- 结束时间 -->
<div class="block">
<!-- <span class="demonstration">结束时间</span> -->
<el-date-picker
v-model="endTime"
type="date"
placeholder="选择结束日期"
:picker-options="pickerOptionsEnd">
</el-date-picker>
</div>
    data() {
return {
startTime: '',
endTime: '',
pickerOptionsStart: {
disabledDate: (time) => {
if (this.endTime !== '') {
// return time.getTime() < Date.now() - 8.64e7 || time.getTime() > this.endTime
return time.getTime() > this.endTime
} else {
// return time.getTime() < Date.now() - 8.64e7
}
}
},
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.startTime !== '') {
return time.getTime() < this.startTime
} else {
// return time.getTime() < Date.now()
// return time.getTime() < Date.now() - 8.64e7
}
}
}, }
},

vue element-ui 设置时间组件的更多相关文章

  1. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  2. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  3. Vue+element UI实现分页组件

    介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...

  4. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  5. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  6. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  7. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  8. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  9. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  10. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

随机推荐

  1. 盒子尺寸父子传递及嵌套Demo

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. vue分页效果

    js部分 <script src="....js/vue.js"></script> <script src="..../js/vue-re ...

  3. db powerdesign CDM、LDM、PDM、OOM的区别

        导读 在本篇文章中,你将会了解到PowerDesigner工具中的三种模型CDM,OOM,PDM的区别和联系. PowerDesigner 简称PD,是一种数据建模工具,适合于开发大型应用系统 ...

  4. 常见cmd命令,开发人员必备

    运行程序 notepad--------打开记事本 calc-----------启动计算器 regedit.exe-------注册表 write----------写字板 mmc--------- ...

  5. (Python基础)简单购物车代码

    以下是最简单,最基础的购物车代码,一起学习,一起参考.product_list = [ ('Iphone',5800), ('Mac Pro',15800), ('car',580000), ('co ...

  6. iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法

    http://blog.csdn.net/hitwhylz/article/details/39518463

  7. 关于Hibernate和Strtus2的xml提示问题

    话不多说,上图 1.Windom 2.preferences 3.搜索框搜索xml catalog 点击Add 4.导入约束(具体操作图上1.2.3)

  8. 转载:深入浅出Zookeeper

    ZAB协议 ZAB协议是专门为zookeeper实现分布式协调功能而设计.zookeeper主要是根据ZAB协议是实现分布式系统数据一致性. zookeeper根据ZAB协议建立了主备模型完成zook ...

  9. python远程连接windows

    远程连接windows系统     https://blog.51cto.com/ckl893/2145809 import winrm win2008 = winrm.Session('http:/ ...

  10. mybatis学习 -每天一记 mybatis insert null 报错

    mybatis 插入数据,model的属性存在null,插入报错 在使用mybatis 进行insert时,如果字段值存在null的情况,会出现插入失败的情况,解决方案: 如果使用spring boo ...