1. ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细,这里做一个element-ui日期插件的补充。
  2.  
  3. 最近做项目用到了datepicker,需要对日期选择做一些限制,
  4.  
  5. 以下情景:选择的时间范围最多为一年,而且只能选择当前日期之前的,2016-01-01之后的日期,代码如下:
  1. data() {
  2. return {
  3. type: 2,
  4. dateRange: [],
  5. pickerMinDate: '',
  6. pickerOptions: {
  7. onPick: ({ maxDate, minDate }) => {
  8. console.log('maxDate=' + maxDate);
  9. console.log('minDate=' + minDate);
  10. this.pickerMinDate = minDate;
  11. },
  12. disabledDate: (time) => {
  13. if (this.pickerMinDate !== '') {
  14. let maxTime = new CDate(this.pickerMinDate).addYear(1);
  15. if (maxTime > new Date()) {
  16. maxTime = new Date();
  17. }
  18. return time.getTime() > maxTime.getTime() || time.getTime() > Date.now() - 8.64e6;
  19. } else {
  20. return time.getTime() <= new Date('2016-01-01').getTime() || time.getTime() > Date.now() - 8.64e6;
  21. }
  22. }
  23. }
  24. };
  25. },

刚开始用time.getTime()>Date.now(),怎么也选择不了今天的日期,后来改成以下才可以

  1. time.getTime() > Date.now() - 8.64e6;
  2.  
  3. 以下代码为参考:
    单个输入框:
  1. <el-date-picker
  2. v-model="value1"
  3. type="date"
  4. placeholder="选择日期"
  5. :picker-options="pickerOptions0">
  6. </el-date-picker>

  情景1: 设置选择今天以及今天之后的日期

  1. data (){
  2. return {
  3. pickerOptions0: {
  4. disabledDate(time) {
  5. return time.getTime() < Date.now() - 8.64e7;
  6. }
  7. },
  8. }
  9. }

  情景2: 设置选择今天以及今天以前的日期

  1. data (){
  2. return {
  3. pickerOptions0: {
  4. disabledDate(time) {
  5. return time.getTime() > Date.now() - 8.64e6
  6. }
  7. },
  8. }
  9. }

  

  1. 情景3: 设置选择今天之后的日期(不能选择当天时间)、
  1. data (){
  2. return {
  3. pickerOptions0: {
  4. disabledDate(time) {
  5. return time.getTime() < Date.now();
  6. }
  7. },
  8. }
  9. }

情景4: 设置选择今天之前的日期(不能选择当天)

  1. data (){
  2. return {
  3. pickerOptions0: {
  4. disabledDate(time) {
  5. return time.getTime() > Date.now();
  6. }
  7. },
  8. }
  9. }

情景5: 设置选择三个月之前到今天的日期

  1. data (){
  2. return {
  3. pickerOptions0: {
  4. disabledDate(time) {
  5. let curDate = (new Date()).getTime();
  6. let three = 90 * 24 * 3600 * 1000;
  7. let threeMonths = curDate - three;
  8. return time.getTime() > Date.now() || time.getTime() < threeMonths;;
  9. }
  10. },
  11. }
  12. }

  

两个输入框

  组件代码

  1. <el-date-picker
  2. v-model="value1"
  3. type="date"
  4. placeholder="开始日期"
  5. :picker-options="pickerOptions0">
  6. </el-date-picker>
  7. <el-date-picker
  8. v-model="value2"
  9. type="date"
  10. placeholder="结束日期"
  11. :picker-options="pickerOptions1">
  12. </el-date-picker>

  情景1: 限制结束日期不能大于开始日期

  1. data(){
  2. return {
  3. pickerOptions0: {
  4. disabledDate: (time) => {
  5. if (this.value2 != "") {
  6. return time.getTime() > Date.now() || time.getTime() > this.value2;
  7. } else {
  8. return time.getTime() > Date.now();
  9. }
  10.  
  11. }
  12. },
  13. pickerOptions1: {
  14. disabledDate: (time) => {
  15. return time.getTime() < this.value1 || time.getTime() > Date.now();
  16. }
  17. },
  18. }
  19. }

  针对选择范围(type="daterange")的日期筛选,类似于单个输入框的情况,直接使用参数time进行判断

参考链接:https://www.cnblogs.com/xjcjcsy/p/7977966.html

  1.  

ElementUI datepicker日期选择器时间选择范围限制的更多相关文章

  1. element-ui DatePicker 日期选择器 让结束日期大于开始日期

    element-ui  DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...

  2. 【ElementUI】日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期, ...

  3. ElementUI DatePicker 日期选择器控制选择时间范围

    选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date" placeholder=" ...

  4. ElementUI】日期选择器时间选择范围限制,只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期

    <el-date-picker v-model="value1" type="date" placeholder="选择日期" :pi ...

  5. 关于ElementUI中日期选择器时间选择范围限制

    1.组件代码 <el-date-picker v-model="value1" type="date" placeholder="选择日期&qu ...

  6. element-ui DatePicker 日期格式处理

    1.使用DatePicker 日期选择器得到的日期格式是这样的 解决方案,添加 value-format="yyyy-MM-dd" <el-date-picker type= ...

  7. DatePicker 日期选择器

    用于选择或输入日期 选择日 以「日」为基本单位,基础的日期选择控件 基本单位由type属性指定.快捷选项需配置picker-options对象中的shortcuts,禁用日期通过 disabledDa ...

  8. Android中DatePicker日期选择器的使用和获取选择的年月日

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

  9. ElementUI日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这 ...

随机推荐

  1. [转帖]mysql8.0忘记密码如何操作?

    mysql8.0忘记密码如何操作? https://www.cnblogs.com/gspsuccess/p/11245314.html mark 一下 上次竟然不知道怎么弄. 很不幸,刚安装了MYS ...

  2. Hadoop集群搭建-02安装配置Zookeeper

    Hadoop集群搭建-05安装配置YARN Hadoop集群搭建-04安装配置HDFS  Hadoop集群搭建-03编译安装hadoop Hadoop集群搭建-02安装配置Zookeeper Hado ...

  3. Swoft2.x 小白学习笔记 (四) --- RPC

    介绍 swoft 中 RPC使用:搭建访问服务端和客户端 RPC服务端: 一.配置,在文件 /app/bean.php中添加 return [ 'rpcServer' => [ 'class' ...

  4. Linux就该这么学——新手必须掌握的命令之文件编辑命令组

    cat 命令 用途 : 用于查看纯文本文件 格式 : cat [选项] [文件] 示例 : more 命令 用途 : 用于查看纯文本文件(内容较多的),可以用”Enter” 键或者”Space”键向下 ...

  5. laravel-admin关联查询问题解决办法

    文档是这么说的: 按照文档上来,没有成功,网上找了好久,说是没有在模型中关联,关联之后的运行结果是这样的: 还是没有成功啊,仔细研究返现是这里写错了,whereHas后面跟的是model中的方法名,而 ...

  6. windows上pip安装及使用详解

    windows上pip安装及使用详解 2018-11-21 19:49:58 十二笔 阅读数 8229更多 分类专栏: Python学习   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA ...

  7. JavaScript例子1-给网页中所有<p>元素添加onclick事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. python爬虫redis-ip代理池搭建几十万的ip数据--可以使用

    from bs4 import BeautifulSoupimport requests,os,sys,time,random,redisfrom lxml import etreeconn = re ...

  9. jquery 取指定class下的input checkbox选中的值

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

  10. Win10系统如何利用蓝牙设置动态锁?

    很多小伙伴都会有这样的经历,出门之后没走多远,却已然忘记是否锁门,有强迫症的人就会重新返回查看,以确保门是否反锁. 我们在使用电脑时也是这样,遇到事情要临时离开,却忘记是否锁屏,再返回来就耽误时间了. ...