iview时间控件 动态不可选日期 可选择24小时范围内 时间往后退24小时

演示

在这里插入图片描述

html 设定

  • 起始时间 触发on-change 方法
  • 结束时间 options 动态设置不可选择的日期。
<!-- 起始时间 -->
<FormItem :label="$t('startTime')" prop="startTime"><DatePickertransfertype="datetime":placeholder="$t('pleaseSelect') + $t('startTime')"format="yyyy-MM-dd HH:mm:ss":options="$config.datetimeOptions"v-model="req.startTime"@on-change="changeStartTime"></DatePicker>
</FormItem>
<!-- 结束时间 -->
<FormItem :label="$t('endTime')" prop="endTime"><DatePickertransfertype="datetime":placeholder="$t('pleaseSelect') + $t('endTime')"format="yyyy-MM-dd HH:mm:ss":options="options2"v-model="req.endTime"></DatePicker>
</FormItem>

设定options2值

disabledDate(date) 内部的date 是时间戳的形式return 返回的是不想要选的区间范围

注意:

  • toLocaleDateString 获取的是年月日
  • toLocaleString 获取年月日时分秒
  • toLocaleTimeString 获取时分秒
  • new Date(new Date().toLocaleString()).getTime(); 获取时间戳getTime()
  • new Date(new Date(_this.req.startTime.toLocaleString()).getTime() + 24 * 60 * 60 * 1000).getTime()) 开始时间选择的往后推24小时

在这里插入图片描述

computed: {
options2() {const _this = this;return {disabledDate(date) {return (date &&(date.valueOf() < new Date(new Date(_this.req.startTime.toLocaleDateString()).getTime()) ||date.valueOf() > new Date(new Date(_this.req.startTime.toLocaleString()).getTime() + 24 * 60 * 60 * 1000).getTime()));},};
},
},

触发changStartTime() 值

  • 结束时间是开始时间的后面24小时
//修改时间
changeStartTime() {const { startTime } = this.req;this.req.endTime = startTime ? new Date(new Date(startTime.toLocaleString()).getTime() + 24 * 60 * 60 * 1000) : "";
},

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

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

相关文章

php 系列题目,包含查看后端源代码

一、弱类型比较问题 原则&#xff1a; 1.字符串和数字比较&#xff0c;字符串回被转换成数字。 "admin" 0&#xff08;true) admin被转换成数字&#xff0c;由于admin是字符串&#xff0c;转换失败&#xff0c;变成0 int(admin)0,所以比较结果是ture 2.混合字符串转…

LA@向量组线性相关性

文章目录 向量组线性相关性线性相关线性无关多向量向量组线性相关单向量向量组的线性相关性单位向量向量组线性相关性双向量向量组的线性相关性双向量线性相关的几何意义三向量线性相关的几何意义包含零向量的向量组线性相关概念迁移:线性方程组和线性相关齐次线性方程组和向量…

『C语言入门』分支和循环语句

文章目录 引言一、什么是语句&#xff1f;1.1表达式语句1.2赋值语句1.3函数调用语句1.4复合语句1.5空语句1.6控制语句 二、分支语句2.1 if语句2.1.1基本语法2.1.2使用else语句2.1.3嵌套if语句2.1.4多层if-else语句 2.2 switch语句2.2.1基本语法2.2.2示例2.2.3穿透 三、循环语句…

RD35M22AT、RD35M22BL、RD35M22DL插装式泄压阀

RD28M22AL、RD28M22BL、RD28M22CL、RD28M22DT、RD28M22AT、RD35M22AT、RD35M22BL、RD35M22DL、RD35M22WL插装式泄压阀 此结构在泄压时的压力非常稳定&#xff0c;若使用在低压时,请注意通过流量,不可超过35LPM。结构最大内漏量约(5滴/分, 设定压力的85%) 压力设定达到 210 ba…

数据库——redis过期时间

文章目录 Redis 给缓存数据设置过期时间有啥用&#xff1f;Redis是如何判断数据是否过期的呢&#xff1f;过期的数据的删除策略了解么&#xff1f; Redis 给缓存数据设置过期时间有啥用&#xff1f; 一般情况下&#xff0c;我们设置保存的缓存数据的时候都会设置一个过期时间。…

Vue组件的基本概念与使用

在Vue中&#xff0c;组件是构建用户界面的基本单元之一。它允许开发者将界面拆分为独立、可重用的模块&#xff0c;使代码更加结构化、易于维护。本文将从简单到复杂&#xff0c;全面介绍Vue组件的各种用法、优点、缺点以及注意事项。 组件的基本概念 组件是Vue的核心概念之一…

深入理解API接口:构建连接世界的桥梁

引言 随着互联网技术的迅速发展&#xff0c;应用程序界面&#xff08;API&#xff09;在现代软件开发中扮演着至关重要的角色。API充当了不同软件系统之间的桥梁&#xff0c;使它们能够相互通信、交换数据和协同工作。本文将深入探讨API接口的概念、设计原则以及在现代应用开发…

抖音seo矩阵系统源代码开发部署分享

一、 开发步骤分享 抖音SEO矩阵系统源代码开发部署分享&#xff0c;需要经验丰富的开发人员和服务器管理人员&#xff0c;以下是大致的步骤&#xff1a; 确定你需要的功能和设计&#xff0c;确定开发人员和设计师的角色和任务分配&#xff0c;以及开发进度和计划。 确定服务器…

SpringBoot 怎么返回html界面

方法一&#xff1a; &#xff08;1&#xff09;html文件要放在resource下的static目录下&#xff08;没有static 自己就创建一个文件夹&#xff09; &#xff08;2&#xff09;在application.yml 中配置视图解析器 spring:mvc:view:prefix: /suffix: .html &#xff08;3&a…

Java可视化物联网智慧工地SaaS平台源码:人脸识别考勤

基于微服务JavaSpring Cloud Vue UniApp MySql实现的智慧工地云平台源码 智慧工地是指利用云计算、大数据、物联网、移动互联网、人工智能等技术手段&#xff0c;为建筑施工现场提供智能硬件及物联网平台的解决方案&#xff0c;以实现建筑工地的实时化、可视化、多元化、智慧化…

❤ vue清除定时器Bug

❤ vue清除定时器Bug 页面加载&#xff0c;清除定时器 clearTimeout(intm) 问题 遇见的需求是&#xff1a;webapp 从A页面进入B页面,B页面点击按钮&#xff0c;加载完B页面的加载效果进入c&#xff0c;从C页面返回A页面&#xff0c;仍然显示B页面的加载效果 结果定时器一直…

[MyBatis系列②]Dao层开发的两种方式

目录 1、传统开发 1.1、代码 1.2、存在的问题 2、代理开发 2.1、开发规范 2.2、代码 ⭐mybatis系列①&#xff1a;增删改查 1、传统开发 传统的mybatis开发中&#xff0c;是在数据访问层实现相应的接口&#xff0c;在实现类中用"命名空间.id"的形式找到对应的映…

Elasticsearch 集成---框架集成SpringData-集成测试-索引操作

1.Spring Data 框架介绍 Spring Data 是一个用于简化数据库、非关系型数据库、索引库访问&#xff0c;并支持云服务的 开源框架。其主要目标是使得对数据的访问变得方便快捷&#xff0c;并支持 map-reduce 框架和云计 算数据服务。 Spring Data 可以极大的简化 JPA &a…

c语言 - 函数的基本用法及传参

函数 函数是一个完成特定功能的代码模块&#xff0c;其程 序代码独立&#xff0c;通常要求有返回值&#xff0c;也可以是 空值。一般形式如下: <数据类型><函数名称>( <形数说明> ) {语句序列&#xff1b;return[(<表达式>)];}函数的声明就是指函数原…

【Vue框架】 router和route是什么关系

前言 之前没太注意&#xff0c;写着写着突然发现它们貌似不太一样&#xff0c;记录以下&#xff0c;回顾的看总结就好。 1、总结✨ route&#xff1a;当前激活路由的对象&#xff0c;用于访问和操作当前路由的信息 router&#xff1a;管理多个route的对象&#xff0c;整个应…

windows下安装go环境 和vscode中go扩展

1. 首先安装GO Go下载地址&#xff1a;go.dev 选择相对应的版本&#xff0c;下载&#xff0c;运行安装程序&#xff0c;并打开命令提示符&#xff0c;运行 go env &#xff0c;确认已经安装go 注意关注其中GOPATH和GOROOT&#xff0c;这两个地址可以在系统环境变量中进行设置…

2023-08-24力扣每日一题

链接&#xff1a; 1267. 统计参与通信的服务器 题意&#xff1a; 同行同列可以发生通信&#xff0c;求能发生通信的机器数量 解&#xff1a; 标记每行/每列的机器个数即可 实际代码&#xff1a; #include<bits/stdc.h> using namespace std; class Solution { pub…

纸贵科技连续三年蝉联IDC中国 FinTech 50榜单

近日&#xff0c;国际权威市场研究机构IDC公布了“2023 IDC中国FinTech 50榜单”。作为领先的区块链技术和解决方案服务商&#xff0c;纸贵科技凭借过硬的区块链技术和丰富的金融科技创新成果&#xff0c;连续第三年荣登IDC中国FinTech 50榜单。 IDC中国FinTech 50榜单是金融科…

【Apollo】自动驾驶感知——毫米波雷达

作者简介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…

在Mybatis中写动态sql这些标签:if、where、set、trim、foreach、choose的作用是什么,怎么用?

在 MyBatis 中&#xff0c;您可以使用动态 SQL 标签来构建灵活的 SQL 查询&#xff0c;以根据不同的条件生成不同的查询语句。以下是这些标签的作用和用法&#xff1a; 1. **<if> 标签&#xff1a;** 用于根据某个条件动态地包含或排除 SQL 片段&#xff0c;test:可以写…