el-date-picker限制选择的时间范围

<el-date-picker
            size="mini"
            v-model="dateTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          />

 限制选择今天之前的时间,并且只能选择一天                

data() {
    return {

        pickerMinDate: '',
      pickerOptions: {
        onPick: (pick) => {
          this.pickerMinDate = pick; //获取当前选择日期
        },
        disabledDate: (date) => {
          const timeStamp = 24 * 60 * 60 * 1000; //1天的时间戳
          const { minDate, maxDate } = this.pickerMinDate;
          if (date.getTime() > Date.now()) {
            return true;
          } else if (minDate && !maxDate) {
            // 日期范围控制在365天内
            const tamp = Math.abs(minDate.valueOf() - date.valueOf());
            const customTimeStamp = timeStamp * 1; //自定义天数
            if (tamp > customTimeStamp) {
              return true;
            }
          }
        },
      },

    }
}

只能选择今天往后365天

 data() {
    return {
      valueDate: "",
      pickDate: "", //存储日期
      pickerOptions: {
        onPick: (pick) => {
          this.pickDate = pick; //获取当前选择日期
        },
        disabledDate: (date) => {
          const timeStamp = 24 * 60 * 60 * 1000; //一天的时间戳
          const { minDate, maxDate } = this.pickDate;
          if (date.getTime() < Date.now() - timeStamp) {
            //选择今天及以后的日期(如果不需要从今天开始,只需要控制范围,这个判断去掉即可)
            return true;
          } else if (minDate && !maxDate) {
            // 日期范围控制在365天内
            const tamp = Math.abs(minDate.valueOf() - date.valueOf());
            const customTimeStamp = timeStamp * 365; //自定义天数
            if (tamp > customTimeStamp) {
              return true;
            }
          }
        },
      },
    };
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/99242.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Fooocus启动时modules报错的解决方法

原理&#xff1a;是由于其他程序的安装导致modules的版本不对&#xff0c;先卸载现有版本&#xff0c;再运行run.bat让其自动安装响应的modules版本。 1、cmd运行windows dos终端。 2、将Fooocus_win64_1-1-1035文件夹备份&#xff0c;rename为Fooocus_win64_1-1-1035backup文…

【ES6】Promise的入门介绍

Promise 是 JavaScript 中的一个对象&#xff0c;用于处理异步操作。Promise 对象代表一个最终可能完成&#xff08;并得到结果&#xff09;或失败&#xff08;并被拒绝&#xff09;的操作&#xff0c;以及其结果的值。 一个 Promise 有三种状态&#xff1a; Pending&#xf…

Spring容器及实例化

一、前言 Spring 容器是 Spring 框架的核心部分&#xff0c;它负责管理和组织应用程序中的对象&#xff08;Bean&#xff09;。Spring 容器负责创建、配置和组装这些对象&#xff0c;并且可以在需要时将它们提供给应用程序的其他部分。 Spring 容器提供了两种主要类型的容器&…

blender 火焰粒子

效果展示 创建火焰模型 新建立方体&#xff08;shift A &#xff09;,添加表面细分修改器&#xff08;ctrl 2 &#xff09;&#xff0c;视图层级调整为 3 &#xff0c;这样布线更密集&#xff1b; 右键将模型转换为网格&#xff0c;tab 进入编辑模式&#xff0c;7 切换到顶…

ssm农业视频实时发布管理系统源码

ssm农业视频实时发布管理系统源码108 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm package com.controller;import java.io.File; import java.io.FileNotFoundException; import java.io.IOException; impo…

Java 读取TIFF JPEG GIF PNG PDF

Java 读取TIFF JPEG GIF PNG PDF 本文解决方法基于开源 tesseract 下载适合自己系统版本的tesseract &#xff0c;官网链接&#xff1a;https://digi.bib.uni-mannheim.de/tesseract/ 2. 下载之后安装&#xff0c;安装的时候选择选择语言包&#xff0c;我选择了中文和英文 3.…

以GitFlow分支模型为基准的Git版本分支管理流程

以GitFlow分支模型为基准的Git版本分支管理流程 文章目录 以GitFlow分支模型为基准的Git版本分支管理流程GitFlow分支模型中的主要概念GitFlow的分支管理流程图版本号说明借助插件Git Flow Integration Plus实现分支模型管理其他模型TBD模型阿里AoneFlow模型 GitFlow分支模型中…

【C++入门】string类常用方法(万字详解)

目录 1.STL简介1.1什么是STL1.2STL的版本1.3STL的六大组件1.4STL的缺陷 2.string类的使用2.1C语言中的字符串2.2标准库中的string类2.3string类的常用接口说明 &#xff08;只讲解最常用的接口&#xff09;2.3.1string类对象的常见构造2.3.2 string类对象的容量操作2.3.3string…

count(1)、count(*)和count(列名)及官网解释

最近面试并且看网上的资料说count(1)和count(*)参差不同&#xff0c;就查看了官网&#xff0c;特别记录一下。 共同点&#xff1a;都是用来统计我们的表中的行数不同点&#xff1a; 执行效果上来说&#xff1a;count(1)和count(*)都不会忽略列值为null的行数&#xff0c;而cou…

一篇文章带你了解-selenium工作原理详解

前言 Selenium是一个用于Web应用程序自动化测试工具。Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。支持的浏览器包括IE&#xff08;7, 8, 9, 10, 11&#xff09;&#xff0c;Mozilla Firefox&#xff0c;Safari&#xff0c;Google Chrome&#xff0c…

无涯教程-Android - ToggleButton函数

ToggleButton将已选中/未选中状态显示为按钮。它基本上是一个带有指示灯的开/关按钮。 Toggle Button ToggleButton属性 以下是与ToggleButton控件相关的重要属性。您可以查看Android官方文档以获取属性的完整列表以及可以在运行时更改这些属性的相关方法。 Sr.No.Attribute…

linuxdeploy安装CentOS7搭建django服务

目录 一、busybox安装 二、linuxdeploy安装 三、linuxdeploy软件设置及安装 四、CentOS基础环境配置 五、CentOS7 上安装Python3.8.10 六、systemctl的替代品 七、CentOS7 上安装mysql5.2.27数据库 八、CentOS7 上安装Nginx服务 九、Django项目应用部署 参考文献: 一…

删除、移动、复制文件时总是要卡在99%一段时间解决方法

Win10文件夹重命名、移动、删除等操作卡顿3-5秒。 原因分析: 查看发现&#xff0c;卡顿期间资源管理器无响应&#xff0c;并且其高度占用CPU资源&#xff0c;但是对于非文件夹文件操作没有问题。 解决方案: 1、双击“此电脑”&#xff0c;选择“查看”&#xff0c;再选择“选…

STM32启动模式详解

文章目录 前置知识1. 单片机最小系统组成2. BOOT电路3. 三种启动模式4. 存储器映射 从主FLASH启动从系统存储区启动从SRAM启动 前置知识 1. 单片机最小系统组成 一个单片机最小系统由电源、晶振、下载电路、BOOT电路、和复位电路组成。少一个单片机都启动不了。 2. BOOT电路 …

Java设计模式:四、行为型模式-06:观察者模式

文章目录 一、定义&#xff1a;观察者模式二、模拟场景&#xff1a;观察者模式2.1 观察者模式2.2 引入依赖2.3 工程结构2.4 模拟摇号2.4.1 摇号服务接口2.4.2 摇号返回结果类 三、违背方案&#xff1a;观察者模式3.0 引入依赖3.1 工程结构3.2 添加摇号接口和实现3.2.1 摇号服务…

全新纠错码将量子计算提效10倍!

上周&#xff0c;来自两个研究小组的最新模拟报告称&#xff0c;一类新兴的量子纠错码的效率比目前的“黄金标准”&#xff08;即表面码&#xff09;高出一个数量级。 量子纠错码的工作原理都是将大量容易出错的量子比特转换成更小的“受保护”量子比特&#xff0c;这些量子比特…

Linux-安装redis6.2.1及主备复制模式(replication)

Linux-安装redis6.2.1 下载redis6.2.1资源上传至安装目录解压及编译解压修改名称编译 修改配置文件主节点从节点 启动及测试启动主节点从节点 测试 下载redis6.2.1资源 地址》https://redis.io/download/ 上传至安装目录 例&#xff1a;/data/replication/ 解压及编译 解…

实录分享 | Alluxio在AI/ML场景下的应用

欢迎来到【微直播间】&#xff0c;2min纵览大咖观点 本次分享主要包括五个方面&#xff1a; 关于Alluxio&#xff1b;盘点企业在尝试AI时面临的挑战&#xff1b;Alluxio在技术栈中的位置&#xff1b;Alluxio在模型训练&模型上线场景的应用&#xff1b;效果对比&#xff1…

让文字会说话,启英泰伦离线语音合成(TTS)技术全面升级!

• A01&#xff0c;请用餐 • 请001号到03号窗口办理业务 • 本次列车即将到达火车南站&#xff0c;请提前准备下车 语音合成&#xff08;TTS&#xff09;技术作为人工智能领域的一项重要技术&#xff0c;已经深入大众生活&#xff0c;无孔不入。通过将文字转化为生动自然的…

Window11-Ubuntu双系统安装

一、制作Ubuntu系统盘 1.下载Ubuntu镜像源 阿里云开源镜像站&#xff1a;https://mirrors.aliyun.com/ubuntu-releases/ 清华大学开源软件镜像网站&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/ 选择想要的版本下载&#xff0c;我用的是20.04版本。 2…