elementui+ <el-date-picker type=“datetime“/>时间组件的当前时间的180天之内的禁止选择处理

需求1如下:当前时间+180天不可选择,180天之后可以选择,之前的时间都禁止选择

页面代码如下:

  <el-date-picker

            v-model="temp.expire_time"

            :picker-options="pickerOption"

            type="datetime"

            placeholder="选择日期时间"

            format="yyyy-MM-dd  HH:mm:ss "

            value-format="yyyy-MM-dd HH:mm:ss"

          />

pickerOption: {

       // 限制只能选择180天以后的时间

        disabledDate: (time) => {

          return (time.getTime() < Date.now() + 8.64e7 * 180)

        }

      },

需求2如下:默认选择当前时间的180天的时间,所有时间都可以选择

页面代码同需求1一样,不同的是处理默认选择的时间

methods: {

    // 获取当前时间的180天后的时间值

    getThreeTime() {

      var data = new Date()

      var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 180)

      var y = Da.getFullYear()

      var m = Da.getMonth() + 1

      var d = Da.getDate()

      var H = Da.getHours()

      var mm = Da.getMinutes()

      var ss = Da.getSeconds()

      m = m < 10 ? '0' + m : m

      d = d < 10 ? '0' + d : d

      H = H < 10 ? '0' + H : H

      return y + '-' + m + '-' + d + ' ' + H + ':' + mm + ':' + ss

    },

}

 // 授权有效期默认值是180天

编辑的函数中处理如下

      if (row.expire_time === null) {

        // 授权有效期默认值选择是180天之后的

        this.$set(this.temp, 'expire_time', this.getThreeTime());

      } else {

        this.$set(this.temp, 'expire_time', row.expire_time);

      }

以上就是关于年月日时分秒的时间组件的两种需求处理,今天就分享到这里啦!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css实现边框彩虹跑马灯效果

效果展示 代码实战 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-…

台湾虾皮卖什么比较好

虾皮&#xff08;Shopee&#xff09;平台在台湾地区广受欢迎&#xff0c;吸引了大量的消费者和卖家。该平台上有许多热销产品类别&#xff0c;这些产品在台湾市场上具有巨大的销售潜力。在本文中&#xff0c;我们将介绍虾皮平台上一些热门的产品类别&#xff0c;并提供一些建议…

大数据Doris(三十八):Aggregate 和 Uniq 模型中的 ROLLUP

文章目录 Aggregate 和 Uniq 模型中的 ROLLUP 一、获得每个用户的总消费

Docker部署Yapi(ubuntu)

Docker部署Yapi 文章目录 Docker部署Yapidocker-compose.yml测试 docker-compose.yml $ git clone https://github.com/vulhub/vulhub.git $ cd vulhub/yapi/mongodb-inj $ ls 1.png config.json docker-compose.yml initdb.js poc.py README.md README.zh-cn.md $ cat …

wsl配置问题错误总结

常用命令&#xff1a; 1.可用 Linux 发行版列表&#xff1a; wsl --list --online 2.默认情况下&#xff0c;安装的 Linux 分发版为 Ubuntu。 可以使用 -d 标志进行更改。若要更改安装的发行版&#xff1a; wsl --install -d <Distribution Name> 3.改变wsl…

〖大前端 - 基础入门三大核心之JS篇(57)〗- 继承

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;哈哥撩编程&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xff0c;目前在公司…

【递归 回溯】LeetCode-78. 子集

78. 子集。 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[],[1],…

FTP连接报530错误 Permission denied 解决方案

文章目录 1.检查vsftpd状态2.检查配置文件 1.检查vsftpd状态 service vsftpd status图中是已经启动的状态&#xff0c;如果没有启动&#xff0c;输入以下命令之一启动&#xff1a; service vsftpd start service vsftpd restart如果没安装vsftpd&#xff0c;请先安装&#xf…

自助式可视化开发,ETLCloud的集成之路

自助式可视化开发 自助式可视化开发是指利用可视化工具和平台&#xff0c;使非技术人员能够自主创建、定制和部署数据分析和应用程序的过程。 传统上&#xff0c;数据分析和应用程序开发需要专业的编程和开发技能。但是&#xff0c;自助式可视化开发工具的出现&#xff0c;使…

【贪心】LeetCode-33. 搜索旋转排序数组

33. 搜索旋转排序数组。 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1…

Python基础-文件的操作

第七章文件的操作 7.1、文件的基本操作 文件打开的格式&#xff1a; file open&#xff08;文件路径&#xff0c;读写模式&#xff09; 文件路径&#xff1a;可以写相对路径&#xff0c;也可以写绝对路径读写模式&#xff1a;r&#xff08;读取&#xff09; w&#xff08;写…

【安全】audispd调研

audispd调研 1 问题背景 在Linux中&#xff0c;当某个进程调用audit_set_pid将自己的pid保存到内核的audit模块后&#xff0c;如果有日志生成&#xff0c;kaudit内核线程就会通过netlink通信机制将审计日志发送给audit_pid&#xff0c;因此&#xff0c;只能有一个进程占用aud…

HTML有哪些列表以及具体的使用!!!

文章目录 一、HTML列表二、列表的应用1、无序列表2、有序列表3、自定义列表 三、总结 一、HTML列表 html的列表有三种&#xff0c;一种是无序列表&#xff0c;一种是有序列表&#xff0c;还有一种为自定义列表。 二、列表的应用 1、无序列表 <ul> <li>无序列表…

在GBASE南大通用ADO.NET 中调用一个存储过程

使用 GBASE南大通用ADO.NET 调用一个存储过程&#xff0c;要先创建一个GBASE南大通用Command 对象并且使用属性 CommandText 传递存储过程名&#xff0c;并将属性 CommandType 设为CommandType.StoredProcedure。为存储过程中的每个输入、输出参数创建一个GBaseCommand 参数。使…

nodejs 使用 ws/socket.io 模块 websocket 即时通讯

源码 koa-mongodb-template ws 模块 下载 npm install ws简单使用 服务端代码 const WebSocket require("ws"); const WebSocketServer WebSocket.WebSocketServer;const wss new WebSocketServer({ port: 8080 });// 监听客户端连接 wss.on("connectio…

【Linux】冯诺依曼体系结构与操作系统及其进程

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解冯诺依曼体系结构与操作系统&#xff0c;掌握…

我为什么从来不给患者方子?

有的患者问&#xff1a;“大夫我给您几百块钱处方费&#xff0c;拿您的方子自己去抓&#xff0c;行吗&#xff1f;” 我笑着回答&#xff1a;“不行的&#xff0c;跟钱没有关系&#xff0c;原因有以下四个。” 【1】 有的患者带方子走后&#xff0c;找抓药的人或者别的中医对…

用bash写脚本

本章主要介绍如何使用bash写脚本。 了解通配符 了解变量 了解返回值和数值运算 数值的对比 判断语句 循环语句 grep的用法是“grep 关键字 file”&#xff0c;意思是从file中过滤出含有关键字的行。 例如&#xff0c;grep root /var/log/messages&#xff0c;意思是从/var/log/…

【工作流Activiti】MyActivit的maven项目

1、Idea新建一个项目MyActivit的maven项目 2、安装插件 在 idea 里面&#xff0c;activiti 的插件叫 actiBPM&#xff0c;在插件库里面把它安装好&#xff0c;重启 idea 就行了。 3、 maven 项目中&#xff0c;并更改 pom.xml。pom 中依赖如下&#xff1a; <?xml version…

Postman使用总结-断言

让 Postman 工具 代替 人工 自动判断 预期结果 和 实际结果 是否一致 断言代码 书写在 Tests 标签页中。 查看断言结果 Test Results 标签页