首页 > 其他分享 >element ui 的picker-option 30天前限制和30天后限制

element ui 的picker-option 30天前限制和30天后限制

时间:2023-09-26 16:22:24浏览次数:36  
标签:picker endDate option getTime 30 time currentDate

pickerOptionsStart:{
        disabledDate:(time)=> {
         // 获取当前日期并减少30天
        //  console.log(time,'..........tiem');
        //  console.log(time,'..........tiem');
         if (this.endDate!='') {
          // console.log(this.endDate,'..........this.endDate');
          const currentDate =new Date(this.endDate); 
          // console.log(currentDate,'..........currentDate');
          currentDate.setDate(currentDate.getDate() - 30);

          // 比较当前日期与要比较的日期是否不在范围内
          return time.getTime() < currentDate.getTime() || time.getTime() > currentDate.getTime() + 30 * 24 * 60 * 60 * 1000;
         }
         
        
        },
      },
      pickerOptionsEnd:{
        disabledDate:(time)=> {
         // 获取当前日期并减少30天
         if (this.startDate!='') {
          const currentDate = new Date(this.startDate);
          currentDate.setDate(currentDate.getDate() + 30);

          // 比较当前日期与要比较的日期是否不在范围内
          return time.getTime() > currentDate.getTime() || time.getTime() < currentDate.getTime() - 30 * 24 * 60 * 60 * 1000;
         }
         
        
        },
      }
 :picker-options="pickerOptionsStart"

 :picker-options="pickerOptionsEnd"
 <date-picker
                  v-model="startDate"
                  :dateWidth="200"
                  @dateChange="onStartDate($event)"
                  :picker-options="pickerOptionsStart"
                ></date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="1">至</el-col>
            <el-col :span="7">
              <el-form-item prop="endDate">
                <date-picker
                  v-model="endDate"
                  :dateWidth="200"
                  @dateChange="onEndDate($event)"
                  :picker-options="pickerOptionsEnd"
                ></date-picker>

 

标签:picker,endDate,option,getTime,30,time,currentDate
From: https://www.cnblogs.com/xiaobaizitaibai/p/17730359.html

相关文章

  • 《流畅的Python》 读书笔记 230926
    写在最前面的话缘由关于Python的资料市面上非常多,好的其实并不太多。个人认为,基础的,下面的都还算可以B站小甲鱼黑马的视频刘江的博客廖雪峰的Python课程进阶的更少,《流畅的Python》应该算一个。加上,自己也很久没有耐心的看完一本书了鉴于以上2点,2023-9-26开始在这里跟......
  • 使用Optional优雅避免空指针异常
    本文已收录至GitHub,推荐阅读......
  • 联想T30瘦客户机安装DoraOS体验
    硬件配置:J4125、8GRAM、128GROM联想T30台式电脑,它是一台迷你计算机,尺寸小巧玲珑,重量适中,方便携带。它的性能十分强大,能够运行各种应用程序,包括网页浏览器、视频播放器等。它还支持多种操作系统,如Windows系统和Linux系统,用户可以根据自己的需求选择不同的操作系统。此外,这台计......
  • Learn Git in 30 days—— 第 25 天:使用 GitHub 远端仓库 - 观念篇
    写的非常好的一个Git系列文章,强烈推荐原文链接:https://github.com/doggy8088/Learn-Git-in-30-days/tree/master/zh-cn 上一篇大家学会了如何下载远端仓库(gitclone, gitpull)与上传远端仓库(gitpush),本篇文章来教大家认识远端仓库的其他细节。与远端仓库有关的指令......
  • thinkphp lang命令执行--struts2 代码执行--(QVD-2022-46174)&&(CVE-2020-17530)&&(CV
    thinkphplang命令执行--struts2代码执行--(QVD-2022-46174)&&(CVE-2020-17530)&&(CVE-2021-31805)thinkphplang命令执行(QVD-2022-46174)影响范围6.0.1<=ThinkPHP<=6.0.13ThinkPHP5.0.xThinkPHP5.1.x漏洞复现POC:?+config-create+/&lang=../../../../......
  • CCF第三十一次计算机软件能力认证202309-1坐标变换(其一)
    第一题第二题一般比较简单,需要对编程达到熟悉的要求即可,不要求了解过多的数据结构和算法使用C提交一直编译错误,相同的代码使用C++提交却能通过,真是醉了坐标变化(其一)题目描述1.需要创建一个操作符矩阵,行和列分别是n和22.需要创建一个操作数矩阵,行和列分别是m和23.求出操作符......
  • 20230925打卡
    今天我参加了传统工程实训,并学习了Java中的类与对象。在传统工程实训中,我们通过实践来加强实际操作能力和问题解决能力。另外,我还学习了Java中的类与对象,这是构建Java应用程序的基础。通过学习类与对象的概念、属性和方法等基本知识,我能够了解如何在Java中创建和使用类与对象,并运......
  • 230729校内赛
    回文一句话题意:从左上角到右下角的路径上的字母能组成回文串的路径有几条题解暴力做法是从左上角和右下角分别往对方\(dp\),复杂度为\(\mathcalO(n^4)\)因为状态只有在\(x1+x2+y1+y2=n+m+2\)时合法,则确定三个变量即可推出剩下一个变量,复杂度为\(\mathcalO(n^3)\)......
  • Learn Git in 30 days—— 第 24 天:使用 GitHub 远端仓库 - 入门篇
    写的非常好的一个Git系列文章,强烈推荐原文链接:https://github.com/doggy8088/Learn-Git-in-30-days/tree/master/zh-cn GitHub是目前全世界最多人采用的Git线上管理平台,他包含了完整的Git远端仓库实作,还有完整的议题追踪机制与报表,更有成千上万的开源码项目都在GitHub......
  • 每日总结20230925
    代码时间(包括上课)5h代码量(行):400行博客数量(篇):1篇相关事项:1、今天上午进行的是相关大数据的测试,老师具体讲了讲相关题目的注意事项。2、今天上午没有完成该题目的编程,只能下午继续努力了。3、晚上问了问编程大佬,对具体的代码的使用有了新的认识,对该题目也就编的差不多了,剩下的......