element设置时间和日期框早于现在的时间和日期禁用

效果: 

今日此时此刻之前的日期、时间禁止选用,切换日期和时间为“2024-10-19 00:00:00",再切换为”2024-10-18 00:00:00"时, 会给form.time默认赋值为今日此时此刻(日期时间少于今日此时此刻则重新赋值)

安装插件:(不要看到安装插件就走了,操作起来试试,效果还是不错的)

npm install moment

页面引入:(在使用页面引入就行)

import moment from 'moment'; // 引入 moment.js

HTML标签代码:

 <el-date-pickerv-model="form.time"type="datetime"placeholder="选择日期时间"style="width:100%":picker-options="{disabledDate(time) {return time.getTime() < Date.now() - 8.64e7;},selectableRange: startTimeRange,}"></el-date-picker>

方法代码:

data () {return {form: {time: null,},startTimeRange: '',}},mounted () {   let st = moment(new Date().getTime()).format('HH:mm:ss')this.startTimeRange = st + ' - 23:59:59'},watch: {//监听的值改成你的时间值'form.time': {handler(newValue, oldValue) {if (newValue) {let date = moment(Date.now()).startOf('day').format('YYYY-MM-DD')let dateTime = moment(new Date().getTime()).format('HH:mm:ss')let newVal = moment(newValue).format('YYYY-MM-DD')let st = ''if (newVal == date) {// 是今天, 选择的时间开始为此刻的时分秒st = dateTime// 切换日期的时候,如果日期为今天,且时间少于当前时间,则设为今日当前时间if (new Date(newValue).getTime() < new Date().getTime()) {//这个位置的参数别忘了改this.$set(this.form, 'time', moment(new     Date().getTime()).format('YYYY-MM-DD HH:mm:ss'))}} else {// 明天及以后从0时开始st = '00:00:00'}this.startTimeRange = st + ' - 23:59:59'}}deep:true}},

大概就这样吧,效果不错,就是搬运起来麻烦点,
参考文献:element日期时间组件如何让用户此刻之前的日期与时间不能选择 - rachelch - 博客园
赠送内容:

安装插件后如果报错:

 ERROR  Failed to compile with 87 errors                                                                                                                                                     上午10:25:40This dependency was not found:* vue in ./node_modules/@riophae/vue-treeselect/dist/vue-treeselect.cjs.js, ./node_modules/element-ui/lib/popover.js and 85 othersTo install it, you can run: npm install --save vue

就把项目中package-lock.json删掉,,然后 从新执行   npm install    就回来了并且也不报错了

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

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

相关文章

Go语言基础学习(Go安装配置、基础语法)

一、简介及安装教程 1、为什么学习Go&#xff1f; 简单好记的关键词和语法&#xff1b;更高的效率&#xff1b;生态强大&#xff1b;语法检查严格&#xff0c;安全性高&#xff1b;严格的依赖管理&#xff0c; go mod 命令&#xff1b;强大的编译检查、严格的编码规范和完整的…

【优选算法】探索双指针之美(一):双指针与单调性的完美邂逅

文章目录 前言&#xff1a;1.盛水最多的容器2.有效三角形个数3. 和为s的两个数字4. 三数之和5. 四数之和 最后想说&#xff1a; 前言&#xff1a; 在上一章中我们已经认识到了双指针&#xff0c;在这章里我们就来探索一下当双指针和单调性遇见后会擦出怎样的火花呢&#xff1f…

几何算法系列:空间实体体积计算公式推导

1.前言 面积和体积的计算是常见和基础的几何算法话题&#xff0c;面积和体积通常作为面或构件的基本信息参与相关的建模、计算、分析等过程。 有关面积的计算&#xff0c;可以参考博主此前的文章&#xff0c; 一种误差较小的轮廓面积计算算法_轮廓面积计算原理-CSDN博客文章…

深入理解Qt中的QTableView、Model与Delegate机制

文章目录 显示效果QTableViewModel(模型)Delegate(委托)ITEM控件主函数调用项目下载在Qt中,视图(View)、模型(Model)和委托(Delegate)机制是一种非常强大的架构,它们实现了MVC(模型-视图-控制器)设计模式。这种架构分离了数据存储(模型)、数据展示(视图)和数据操作(委托),使…

Apple 新品发布会亮点有哪些 | Swift 周报 issue 61

文章目录 前言新闻和社区苹果据称正洽谈投资 OpenAI 英伟达也有意跟投消息称苹果公司服务部门将裁员约百人&#xff0c;波及 Apple Books / Apple News 等业务苹果拟 9 月 10 日举行今年最重磅新品发布会&#xff0c;iPhone 16 亮相&#xff1f;都有哪些看点&#xff1f; 提案正…

京东笔试题

和谐敏感词 &#x1f517; 题目地址 &#x1f389; 模拟 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);int n scanner.nextInt();String s scanner.next();String[] words new String[…

【Spring篇】Spring中的Bean管理

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f3af;Spring IOC容器 &#x1f6a…

如何开启华为交换机 http

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…

kafka自定义配置信息踩坑

org.apache.kafka.common.config.ConfigException: Invalid value 0 for configuration acks: Expected value to be a string, but it was a java.lang.Integer 场景描述&#xff1a; 单个kafka使用springboot框架自带的 yml 配置完全OK&#xff08;因为底层会帮我们处理好类…

QGraphics类型学习使用【Qt】【C++】

QGraphics类型学习使用 需求过程全部完整代码 首先已知&#xff0c;QGraphicsView&#xff0c;QGraphicsScene, QGraphicsItem&#xff0c;分别称为&#xff1a;视图&#xff0c;场景&#xff0c;图元&#xff0c;图表就是各种各样的元素&#xff0c;图片元素&#xff0c;线条元…

排序算法 —— 归并排序(理论+代码)

目录 1.归并排序的认识 归并排序的思想 归并排序动图演示 2.归并排序的递归实现 归并排序的遍历方式 归并排序的归并流程 归并排序的递归代码实现 3.归并排序的非递归实现 非递归实现分析 边界分析 非递归实现代码 4.归并排序总结 时间复杂度 空间复杂度 稳定性…

Postman使用-基础篇

前言 本教程将结合业界广为推崇和使用的RestAPI设计典范Github API&#xff0c;详细介绍Postman接口测试工具的使用方法和实战技巧。 在开始这个教程之前&#xff0c;先聊一下为什么接口测试在现软件行业如此重要&#xff1f; 为什么我们要学习Postman&#xff1f; 现代软件…

ubuntu 安装keepalived+haproxy

一、安装keepalived sudo apt update sudo apt install keepalived sudo systemctl start keepalived sudo systemctl enable keepalived sudo systemctl status keepalived#配置Keepalived sudo cp /etc/keepalived/keepalived.conf.sample /etc/keepalived/keepalived.conf …

Jmeter 实战 JDBC配置

​ JDBC JDBC&#xff08;Java Database Connectivity&#xff09;是一种用于执行SQL语句的Java API。通过这个API&#xff0c;可以直接连接并执行SQL脚本&#xff0c;与数据库进行交互。 使用JMeter压力测试时&#xff0c;操作数据库的场景 在使用JMeter进行接口压力测试时…

大规模多传感器滑坡检测数据集,利用landsat,哨兵2,planet,无人机图像等多种传感器采集数据共2w余副图像,mask准确标注滑坡位置

大规模多传感器滑坡检测数据集&#xff0c;利用landsat&#xff0c;哨兵2&#xff0c;planet&#xff0c;无人机图像等多种传感器采集数据共2w余副图像&#xff0c;mask准确标注滑坡位置 大规模多传感器滑坡检测数据集介绍 数据集概述 名称&#xff1a;大规模多传感器滑坡检测…

R语言建模线性回归

一、 a. # 给定的 (x, y) 数据 x <- c(2, 9, 10, 7) y <- c(3, 13, 12, 11)# 线性回归模型 y a bx model1 <- lm(y ~ x) summary(model1) # 查看回归结果# 提取系数 a 和 b a <- coef(model1)[1] b <- coef(model1)[2]# 预测值 y_pred <- predict(mode…

数据字典是什么?和数据库、数据仓库有什么关系?

一、数据字典的定义及作用 数据字典是一种对数据的定义和描述的集合&#xff0c;它包含了数据的名称、类型、长度、取值范围、业务含义、数据来源等详细信息。 数据字典的主要作用如下&#xff1a; 1. 对于数据开发者来说&#xff0c;数据字典包含了关于数据结构和内容的清晰…

【C++篇】探索STL之美:熟悉使用String类

CSDN 文章目录 前言 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&…

基于SSM+微信小程序的家庭记账本管理系统(家庭1)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 1、管理员端功能有首页、个人中心、用户管理&#xff0c;消费详情管理、收入详情管理、系统管理等。 2、用户端功能有首页、消费详情、收入详情、论坛信息、我的等功能。 2、项目技术 …

python机器人编程——用python调用API控制wifi小车的实例程序

目录 一、前言二、一个客户端的简单实现2.1 首先定义一个类及属性2.2 其次定义连接方法2.3 定义一些回调函数2.4 定义发送小车指令方法2.5 定义一个正常关闭方法 三、python编程控制小车的demo实现四、小结PS.扩展阅读ps1.六自由度机器人相关文章资源ps2.四轴机器相关文章资源p…