举例:只能选今天或者今天之后的时间(如下图)

         <el-date-picker clearable
v-model="form.limitTime"
type="date"
:readonly="isDetail"
value-format="yyyy-MM-dd"
:picker-options="expireTimeOPtion"
placeholder="请选择处理期限">
</el-date-picker>

注意::picker-options="expireTimeOPtion"

一、只能选择今天或者今天之后的时间

data() {
return {
expireTimeOPtion: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
}
},
}
}

二、今天以及今天之前的日期

data() {
return {
expireTimeOPtion: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
}
},
}

三、只能选取今天往后三天内

data() {
return {
expireTimeOPtime: {
disabledDate(time) {
const times = new Date(new Date().toLocaleDateString()).getTime() + 3 * 8.64e7 - 1
return time.getTime() < Date.now() - 8.64e7 || time.getTime() > times // 如果没有后面的-8.64e7就是不可以选择今天的
}
}
}
}

完结撒花!赶快试试吧!

作者:微微一笑绝绝子
出处:https://www.cnblogs.com/wwyxjjz/p/16922199.html
本博客文章均为作者原创,转载请注明作者和原文链接。

vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内的更多相关文章

  1. 在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作

    最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...

  2. vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用

    需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDa ...

  3. element 日期时间选择器type = "datetimerange",限制时间的选择范围

    这里限制了只能选择一周的时间   pickerOptions:{          onPick(time){              // 如果选择了只选择了一个时间              i ...

  4. 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  5. 循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  6. 封装Vue Element的可编辑table表格组件

    前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...

  7. 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  8. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  9. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  10. 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

随机推荐

  1. [深度探索C++对象模型]memcpy和memset注意事项

    不管使用memcpy()还是memset(),都只有在"classes不含任何由编译器产生的内部members"时才能运行.如果这个类声明一个或者一个以上的virtual func ...

  2. RSA非对称加密算法浅析

    说起加密算法,大的分类上,常规区分通常会区分为对称加密与非对称加密两种,两种算法都各有优缺点.然而互联网发展到今天,应用更广的还是非对称加密的方式,而非对称加密中,RSA又首当其中,被广泛运用到各类应 ...

  3. Git + Jenkins 自动化 NGINX 发布简易实现

    概述 之前基于 GitLab + Jenkins 实现了简单的 NGINX 的自动化发布. 具体包含如下的组件: GitLab 包括 GItLab 的 WebHook: Jenkins 及其插件: G ...

  4. Google Cloud Spanner 究竟是什么?

    谷歌于2017年推出的Google Cloud Spanner,原是谷歌内部使用的一个数据服务,后来又成为了谷歌云平台上搭建的数据库服务. Google Cloud Spanner 是一种数据库,它结 ...

  5. 如何通过Java应用程序添加或删除 PDF 中的附件

    当我们在制作PDF文件或者PPT演示文稿的时候,为了让自己的文件更全面详细,就会在文件中添加附件.并且将相关文档附加到 PDF 可以方便文档的集中管理和传输.那么如何添加或删除 PDF 中的附件呢?别 ...

  6. C# 线程同步查漏补缺

    同步构造 当线程 A 在等待一个同步构造,另一个线程 B 持有构造一直不释放,那么就会导致线程 A 阻塞.同步构造有用户模式构造和内核模式构造. 用户模式构造通过 CPU 指令来协调线程,所以速度很快 ...

  7. QGraphicsView, QGraphicsObject ,QQGraphicsSvgItem 图片接收鼠标事件 拖拉 收放

    由于项目要求,需要加载svg格式图片和pixmap图片,并根据指定坐标在图上进行勾画,并且对相应位置接收鼠标事件. -继承QGraphicsObject,实现加载pixmap的项 myimageite ...

  8. Linux防火墙部署与配置

    Linux防火墙部署与配置 1. 实验概述 Linux作为网关,搭建小型局域网,在此基础上进行实验,了解Linux防火墙的构成.NAT和包过滤配置方法等. 2. 实验环境 网络大致结构如图2-1所示, ...

  9. SpringBoot 三大开发工具,你都用过么?

    本文已经收录到Github仓库,该仓库包含计算机基础.Java基础.多线程.JVM.数据库.Redis.Spring.Mybatis.SpringMVC.SpringBoot.分布式.微服务.设计模式 ...

  10. LeetCode_周赛_330

    6337. 统计桌面上的不同数字 代码 后面出现的数字都是小于 n 的. n = 1 时,答案是 1. n > 1时: 第一天,n % (n - 1) == 1,n - 1会被加入 第二天,(n ...