vue2+ElementUI时间选择器限制可选范围为今天往前7天内的任意一天

2023-11-08

题目有2个重点:1、可选范围为今天往前7天(含今天)2、只能选择7天内的任意一天

由此可知,用户选择的最大日期和最小日期为同一天,即只能选择一天,也就是说,使用了时间范围插件,但是model中的两个日期是同一天。

HTML:

 <el-date-picker
      class="datePicker"
      v-model="params.dates"
      type="daterange"
      range-separator="-"
      :start-placeholder="today"
      :end-placeholder="today"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      @change="changeParam_data"
      @focus="resetMinDate"
      v-show="routeName !== 'keySites' && routeName !== 'equipmentDetails'"
      :picker-options="pickerOptions"
    >
    </el-date-picker>

data中设置相应的值:

 data() {
    return {
     
      today:
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate(),
      pickerMinDate: "",
      pickerOptions: {
        disabledDate: (time) => {
          //一天的毫秒数:60*60*24*1000*1 = 8.64e6
          if (this.pickerMinDate !== "") {
            // let maxTime = new Date(this.pickerMinDate).getTime()+1000*60*60*24;
            let minTime = new Date(this.pickerMinDate).getTime();
            let chooseTime = new Date(time).getTime();
            return chooseTime > minTime || chooseTime < minTime;
          } else {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() <
                new Date(new Date().getTime() - 60 * 60 * 1000 * 24 * 7)
            );
          }
         
        },
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate;

        },
      },
      dateValue: "2022-01-01",
   }
  },

最后在method中设置相应的方法:(在第二次选择时清空时间值)

methods: {
  
    resetMinDate() {
      this.pickerMinDate = "";
    },
  },

 

如此,大功告成!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue2+ElementUI时间选择器限制可选范围为今天往前7天内的任意一天 的相关文章

  • 使用 AJAX 来回发送信息

    使用 post 你可以向服务器发送信息 但是当你需要从服务器接收信息时怎么办呢 信息如何从可以由 php 变量保存的方式变为可以由 javascript 变量保存的方式 反之亦然 这与您的问题更相关 http docs jquery com
  • 从数组数组中获取唯一值[重复]

    这个问题在这里已经有答案了 我有以下数组 let arr email protected cdn cgi l email protection email protected cdn cgi l email protection email
  • Yeoman-Angular 生成的应用程序中缺少 Angular 脚本

    我已经使用 Yeoman Angular Generator 生成了一个应用程序 但项目中缺少 angular js 和其他 Angular 文件 我可以在 Bower json 文件中看到这些依赖项 如下所示 name mi portfo
  • JS如何获取多维数组的最大深度?

    我有一个多维数组 我想知道它的最大深度 我发现了这个灵魂 但它不适用于对象数组 const getArrayDepth arr gt return Array isArray arr 1 Math max arr map getArrayD
  • Object.assign() - 奇怪的行为需要解释

    我有这个代码 function margeOptions options passedOptions options Object assign options passedOptions let passedOpts a true let
  • 将 FBX 文件转换为 .gltf 后,模型非常小,为什么?

    问题 将 FBX 文件转换为 gltf 后 模型非常小 为什么 我尝试用以下方法缩放模型frontObject scale set 1000 1000 1000 但我收到以下错误 TypeError Cannot read property
  • TypeScript 中类和命名空间的区别

    到底有什么区别classes and namespaces在打字稿中 我知道 如果您创建一个带有静态方法的类 您可以在不实例化该类的情况下访问它们 这正是我猜想的命名空间的要点之一 我还知道你可以创建多个同名的命名空间 并且它们的方法在编译
  • Ember.js 数组作为模型的属性

    干杯 我有一些模型 它的一个属性是一个数组 但由于某些原因 我在服务器上使用 mongoDB 并且它是嵌入式模型和 ember data 的问题 我不能做这样的事情 App Foo DS Model extend numbers DS ha
  • 如何在 Jest 测试中模拟 StatusBarManager.getHeight?

    我正在使用 expo 34 并且反应本机用户界面库 https www npmjs com package react native ui lib来自 wix 并且在为我的组件设置笑话测试时遇到问题 问题看起来出现在link https g
  • Angular 7 Guard 重定向仅适用于双击

    问题是我已经实现了一个 Guard 旨在处理特定的目录 如果当前用户名的角色等于 2 它应该返回 true 如果没有 那么它不应该重定向 这是我的 app routing module ts 文件 问题出在 userlist 路径中 我们是
  • AttachEvent 或 addEventListener - 存储在哪里?

    在 jQuery 中 如果我这样做 a click function Do something 点击事件存储在 a data events 我可以像这样获取它 jQuery each a data events function i eve
  • 如何正确关闭 Node.js Express 服务器?

    我需要在收到回调后关闭服务器 auth github callback网址 与平常一样HTTP API http nodejs org docs latest api http html关闭 服务器目前支持server close call
  • jQuery 问题:它的真正含义是什么?

    function window undefined jquery code jQuery window 它到底意味着什么 是不是也意味着 document ready 或者只是两种不同的东西 已经有两个答案 但这是我对代码缺失端的猜测 fu
  • 函数声明或函数表达式

    我刚刚在块作用域中定义函数时遇到了问题 考虑以下程序 try greet function greet alert Merry Christmas catch error alert error 我希望这个程序能够发出警报Merry Chr
  • 如何混淆或使 JavaScript 文件不可读?

    我的应用程序中有 JavaScript 脚本 其中包含 JavaScript 和 jQuery 函数 所有用户与我的应用程序的交互都是动态的 并且通过 jQuery 传递到应用程序 我意识到 当我在客户端运行我的应用程序时 客户端可以通过查
  • html输入数字,min + step,使step忽略min?

    是否有可能使step忽略min属性
  • 如何让无限滚动发挥作用?

    我正在尝试让这个无限加载脚本在我的项目中工作 这是我的 HTML div div div class pagina div div class pagina div div class pagina div div class pagina
  • router.navigate 使用查询参数 Angular 5

    我在使用查询参数路由到路由时遇到问题我有一个像这样的函数 goToLink link this router navigate link split 0 queryParams this sortParams link 和这个功能 sort
  • JavaScript 比较中应使用哪个等于运算符(== 与 ===)?

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我在用着JSLint http en wikipedia org wiki JSLint
  • 通过jquery ajax()和serialize()提交html表单

    我想通过 jquery ajax 提交此表单 这是我所做的 但它不起作用 即表单正在提交并刷新页面 但我没有看到响应 即在同一页面上打印数组 HTML

随机推荐

  • 如何进行本地分支管理

    文章目录 如何进行本地分支管理 Git进行分支管理 显示分支一览表 创建分支 转到新创建的分支 创建分支并转到新创建的分支 分支合并 删除分支 冲突合并 Tortoise进行分支管理 显示分支 创建分支 切换分支 分支合并 冲突合并 VS2
  • 绕过__chkesp堆栈检查

    前面很多注入相关的文章中都提到为了保证注入后原始程序能恢复正常的执行流 需要在编译器中关闭堆栈检查 为了解决问题 这是个好手段 但是不得不说这是回避问题 不是根本上解决问题 本文旨在解决这个问题 vs用 chkesp来实现堆栈检查 chke
  • 工业制造业亟需数字化转型,区块链可以发挥哪些价值?

    智能信息化技术驱动的第四次工业革命正推动制造业积极拥抱物联网 云计算等新技术进行数字化 智能化转型升级 制造业是一个纷繁复杂的庞大网络 不仅涉及机器 零件 产品等实体还有机器制造商 物流公司 销售等诸多利益相关方 在当今数字化时代中 如何帮
  • 如何防止小人对你的网站进行反向代理

    引言 如果是小站或者刚建立的站 则不用担心 但如果有名气了 便可能出现小人反代你的网站 做成所谓的 镜像站点 盗版站点 这篇文章就是介绍如何防止一些简单的反代小人 实施方法 一 使用 htaccess禁止反向代理 在站点根目录下新建 hta
  • android根据物理按键上下选中listview的item,回车进入点击相应事件

    最近做扫码枪程序 因应用于冷库 用户需求在列表选择上可以用上下键代替滑动 所以做了一个小demo 记录一下 话不多说 直接上代码 1 布局文件很简单 主界面 一个输入框一个列表 因为是手持采集枪 输入框经常用到 所以在做demo的时候也加上
  • Mac终端(Terminal)自定义颜色,字体,背景 & Mac系统如何显示隐藏文件?& mac下载gcc并测试

    Mac终端 Terminal 自定义颜色 字体 背景 1 打开终端 输入 git clone git github com altercation solarized git下载Solarized 2 clone完成后 打开 然后打开 3
  • 矩阵乘法复杂度分析

    一 背景 在很多机器学习或者数据挖掘论文中 里面或多或少的涉及到算法复杂度分析 进一步思考 是如何得到的呢 很长时间里 我也感受到比较疑惑 阅读论文过程中 在涉及到这部分内容时 会直接跳过算法复杂度分析这快 其一是因为比较烧脑 虽然知道复杂
  • OpenFeign中动态URl、动态传递接口地址

    前言 在微服务盛行的今天 做接口开发请求第三方服务的接口 大概率会用feign做请求 而feign也是最常用的一种rpc框架 这里主要是说明在进行feign请求的时候 第三方服务的url和接口如何动态获取 若是该接口是作为基础服务可能会请求
  • IDEA开启后,设置工作空间位置

    欢迎加群 854228077 帮助更多java程序员提升技术 资料多 大佬多 第一步 打开IDEA
  • js中对象与函数的关系

    问题引入 new Function msg alert msg 分析某源码的时候看到这样一段代码 突然一个问题萌发了 js中对象与函数到底有什么样的关系 首先看几段代码 function test console log test inst
  • 最适合零基础学的爬虫案例,利用Python采集静态网站数据。

    前言 大家晚上好 我看到评论区有很多的零基础小白 是不怎么懂爬虫的 那么今天就教大家一个最适合新手小白的爬虫教程 就是抓取静态网站的数据 非常简单 废话不多说 直接上干货 首先如果我们想拿出来这个网址上有用的图片地址并下载下来 那就要用到了
  • RocektMQ社区"每周直播分享第7期"如约而至

    各位同学 RocektMQ社区 每周直播分享第7期 如约而至 分享题目 RocketMQ消息消费概述 直播方式 钉钉群直播方式 群号 21791227 分享时间 2019 01 17 20 00 21 30 本周四 分享讲师 费红健 内容简
  • POJ 1062 昂贵的聘礼

    题面 年轻的探险家来到了一个印第安部落里 在那里他和酋长的女儿相爱了 于是便向酋长去求亲 酋长要他用10000个金币作为聘礼才答应把女儿嫁给他 探险家拿不出这么多金币 便请求酋长降低要求 酋长说 嗯 如果你能够替我弄到大祭司的皮袄 我可以只
  • linux安装rocketmq(有效)

    1 基于java maven环境搭建 linux java 搭建 linux安装java1 8 拒绝 emo的博客 CSDN博客 linux maven搭建 linux安装maven3 2 2 拒绝 emo的博客 CSDN博客 2 下载 A
  • 七大排序算法的基本原理及实现

    目录 1 排序的概念及引用 1 1 排序的概念 1 2 常见的排序算法 2 常见排序算法的实现 2 1 基于选择的思想 2 1 1 直接选择排序 2 1 2 堆排序 2 2 基于插入的思想 2 2 1 直接插入排序 2 2 2 希尔排序 缩
  • pycharm连接MYSQL数据库

    pycharm连接MYSQL 1 gt 使用pip工具 进入cmd 输入 pip install pymysql 回车进行安装 有网络的情况下进行 安装最新版的pymysql可以使用 python m pip install upgrade
  • 希尔排序(Shell Sort)

    如今是大数据时代 大量数据需要处理 便越来越需要跟优秀的算法 算法 Algorithm 是指解题方案的准确而完整的描述 是一系列解决问题的清晰指令 算法代表着用系统的方法描述解决问题的策略机制 也就是说 能够对一定规范的输入 在有限时间内获
  • strcpy和memcpy的区别

    1 strcpy函数 1 1 函数原型 char strcpy char dest const char src 1 2 函数功能 strcpy是一种C语言的标准库函数 strcpy把含有 0 结束符的字符串复制到另一个地址空间 返回值的类
  • linux:docker compose使用已经存在的网络

    问题 如题 参考 Networking in Compose Docker Documentation services networks network1 name my pre existing network external tru
  • vue2+ElementUI时间选择器限制可选范围为今天往前7天内的任意一天

    题目有2个重点 1 可选范围为今天往前7天 含今天 2 只能选择7天内的任意一天 由此可知 用户选择的最大日期和最小日期为同一天 即只能选择一天 也就是说 使用了时间范围插件 但是model中的两个日期是同一天 HTML