一般

<el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么起始日期不能选截止日期后面的。
代码如下:
1,起始日期:
     <el-form-item
                    label="有效起始日期"
                    prop="title"
                  >
                    <el-date-picker
                      v-model="info.startDate"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerIssueOptions"
                      size="mini"
                      style="width:100%;height:30px"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                    />
2,截止日期:
     <el-form-item
                    label="有效截止日期"
                    prop="title"
                  >
                    <el-date-picker
                      v-model="info.endDate"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerExpireOptions"
                      size="mini"
                      style="width:100%;height:30px"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                    />
然后主要是针对picker-options的操作:
 在data中写上
  

  pickerIssueOptions: {
        disabledDate: (time) => {
          if (!this.info.endDate) { return false }
          return time.getTime() > new Date(this.info.endDate.replace(/-/g, '/')).getTime()
        }
      },
      pickerExpireOptions: {
        disabledDate: (time) => {
          if (!this.info.startDate) { return false }
          return time.getTime() < new Date(this.info.startDate.replace(/-/g, '/')).getTime()
        }
      },
即可,注意if里面的判断。

element UI+vue关于日期范围选择的操作,picker-options属性的使用的更多相关文章

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

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

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

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

  3. 如何在 Vite 中使用 Element UI + Vue 3

    在上篇文章<2021新年 Vue3.0 + Element UI 尝鲜小记>里,我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目,而 Vue CLI 实际 ...

  4. Element UI - DatePicker 自定义日期选择期间

    <el-date-picker v-else v-model="searchForm.data_Selected" type="daterange" un ...

  5. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

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

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

  7. element ui 时间控件 多个日期

    前言:工作中用到 vue+element ui 的前端框架,需要使用时间控件来选择多个日期,已月日的形式,且有默认值,所以记录一下.转载请注明出处:https://www.cnblogs.com/yu ...

  8. vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。

    老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...

  9. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

随机推荐

  1. springcloud webflux

    文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...

  2. 题解 P3940 分组

    有些梦想虽然遥不可及,但不是不可能实现.只要我足够的强. 前言 调了挺长时间的,并查集合并的时候需要 find 一下,不然会炸内存.... 解题思路 参考了题解区一篇思路非常好的题解,在这里讲一下自己 ...

  3. Linux中测试网络命令

    ping IP -t 是持续性查看网络状态

  4. 面试侃集合 | DelayQueue篇

    面试官:好久不见啊,上次我们聊完了PriorityBlockingQueue,今天我们再来聊聊和它相关的DelayQueue吧. Hydra:就知道你前面肯定给我挖了坑,DelayQueue也是一个无 ...

  5. vue环境搭建以及使用vue-cli创建项目

    我要跑vue项目,所以我要搞vue. 1.环境搭建 进入node官网下载对应版本的node,一步步安装即可. 安装会自动配置路径和npm包管理环境,通过node -v进行验证 2.安装vue-cli脚 ...

  6. ceph-csi源码分析(7)-rbd driver-IdentityServer分析

    更多 ceph-csi 其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 ceph-csi源码分析(7)-rbd driver-IdentityServer分析 当 ...

  7. OpenGL ES 压缩纹理

    什么是压缩纹理 在实际应用特别是游戏中纹理占用了相当大的包体积,而且GPU无法直接解码目前流行的图片格式,图片必须转换为RGB等类型的格式才能上传到GPU内存,这显然增加了GPU内存的占用.为了处理这 ...

  8. iOS工程师如何恍然大悟?

    聊聊行情?为什么总有人在乎旁人的看法而忽略自己的初衷? 虽然iOS开发市场说不上好但也绝不算坏,想没想过那些煽风点火说iOS不行的人在做什么? 真的转行从头开始? 错.大错特错! 在劝退你的同时他们会 ...

  9. centos 8 gitlab 重置管理员的密码

    登录gitlab安装服务器 由于 root 账户用的很少,所以我们容易忘记它的密码,但不代表它不重要,类似 linux 的 root 账户:一旦我们忘记了 root 账号的密码,我们需要知道重置的方法 ...

  10. 暑假自学java第二天

    今天学习了一些java规则 一个java源文件的公开类只能有一个,而且必学和源文件名相同. 了解到java的标识符规范,这对以后的团队协作有很大作用. 标识符规则和c++还是很相似的 java中的字面 ...