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

               <!-- 开始时间 -->
<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. H5判断手机是否存在应用和打开应用

    伪命题,其实js无法判断您的手机是否存在此应用,遇到这样的需求我们应该跟ios和Android开发的同事商量,需要他们给你一个url尝试打开,如果能打开就表示手机中有该应用,如果不能打开就表示手机没有 ...

  2. Log4j日志框架学习零到壹(一)

    日志是系统开发过程中用于排查问题重要的记录.通常使用日志来记录系统运行的行为,什么时间点发生了什么 事情.Java中常用的莫过于Log4j框架了.下面主要围绕Log4j的基础知识.Log4j的使用方式 ...

  3. jsfl 进入影片 退出影片

    targetMC=fl.getDocumentDOM().getTimeline().layers [0].frames[0].elements[0]; fl.getDocumentDOM().lib ...

  4. mysql 函数获取子节点

    DELIMITER $$ USE `topsale`$$ DROP FUNCTION IF EXISTS `getShopIdByUserId`$$ CREATE DEFINER=`root`@`%` ...

  5. 有哪些api接口可以实现微信自动唤醒浏览器,下载app,打开网页

    现在微信渠道可以说是拉新最快的渠道,因为微信具备强裂变性.但是目前微信对第三方下载链接的拦截是越来越严格了,那么想要在微信内肆无忌惮地推广链接就需要用到微信跳转浏览器的接口,那如何获取该接口呢?   ...

  6. oracle数据库误删的表以及表中记录的恢复

    oracle数据库误删的表以及表中记录的恢复 一.表的恢复 对误删的表,只要没有使用PURGE永久删除选项,那么从flash back区恢复回来希望是挺大的.一般步骤有: --1.从flash bac ...

  7. mysql--构造数据、导入导出

    一.mysql造数据脚本     DELIMITER $$ DROP PROCEDURE IF EXISTS `test3`$$ CREATE     /*[DEFINER = { user | CU ...

  8. Fragment传参

    1. 封装基类 /** * Created by chenhaibin * Time 18/1/20 * Email chenhaibin415@163.com * Description:封装代码的 ...

  9. 微信小程序-数据绑定

    在js页面的data字典内添加绑定数据 data: { "messg":"helloworld " }, 在wxml页面内使用{{}}调用数据

  10. os库新建文件夹

    file.write()可以自动生成文件但不能生成文件夹. os库生成文件夹 # 判断文件夹是否存在(./xxx/xxx) if not isExists: os.makedirs(path) pri ...