el-date-picker默认结束为当前时分秒

在element ui中的日期时间选择组件中默认是00:00,现在需求是点击默认结束时间为当前时分秒,查了很多资料写的都不准确

需求:实现日期时间组件可选择当前日期,比如当前是2024年01月17号下午17:21 那选中时必须结束时间为17:21 也可选01月17号当天其他的时间(很多文章超过17:21都不能选了,搞得我头疼

在这里插入图片描述
效果如下:
在这里插入图片描述
不多说,上代码:

 :default-time="['00:00:00', new Date().toLocaleTimeString('chinese', { hour12: false })]"

设置当前默认结束时间new Date().toLocaleTimeString(‘chinese’, { hour12: false })

布局

这里主要代码是

 <el-form-item prop="carDate">
	<el-date-picker
	   v-model="ruleForm.carDate"
	   :picker-options="pickerOptions"
	   type="datetimerange"
	   value-format="yyyy-MM-dd HH:mm:ss"
	   :default-time="['00:00:00', new Date().toLocaleTimeString('chinese', { hour12: false })]"
	   range-separator="至"
	   start-placeholder="开始时间"
	   end-placeholder="结束时间"
	 >
	 </el-date-picker>
	</el-form-item>

校验

   pickerOptions: {
        disabledDate: time => {     
          return time.getTime() > Date.now()
        }
      },

难点:默认选中当前时分秒

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

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

相关文章

JQuery 操作Class滚动轮播展示效果

JQuery 操作Class滚动轮播展示效果 展示效果&#xff1a; 1.html <div class"list"><div class"item"><div class"icon"></div><div class"content">第一行xxxxxxxxx</div></div><div …

图解第五代英特尔至强可扩展处理器

四年五节点&#xff0c;一年出两代。在年初推出代号Sapphire Rapids&#xff08;蓝宝石激流&#xff0c;SPR&#xff09;的第四代英特尔至强可扩展处理器之后&#xff0c;仅隔11个月&#xff0c;代号Emerald Rapids&#xff08;绿宝石激流&#xff0c;EMR&#xff09;的第五代英…

uniapp写微信小程序实现电子签名

写电子签名一定要注意的是一切全部按照手机上的适配来&#xff0c;为啥这么说呢&#xff0c;因为你在微信开发者工具中调试的时候认为是好的&#xff0c;正常的非常nice,当你发布版本的时候你会发现问题出来了。我下边的写法你可以直接用很简单。就是要记住canvas的几个属性和用…

CSC8021_computer network_The Application Layer

The Role of the Application layer The Application layer is the interface between the network and its users › It contains network services (e.g. DNS) › It contains user applications (e.g. email, web browsing&#xff09; Domain Name System (DNS) › The …

51单片机_智能家居终端

实物演示效果&#xff1a; https://www.bilibili.com/video/BV1bh4y1A7ZW/?vd_source6ff7cd03af95cd504b60511ef9373a1d 51单片机是否适合做多功能智能家居控制系统&#xff1f;51单片机的芯片是否具有与WiFi通信的能力&#xff1f;如果有的话&#xff0c;具体有哪些芯片啊&a…

安泰高压放大器设计的意义及其应用价值

高压放大器的设计是电子工程领域中的重要课题。其意义在于提供强大的放大能力&#xff0c;将高电压信号放大到所需的输出水平。高压放大器在多个领域具有广泛应用&#xff0c;包括科学研究、医疗设备、工业驱动和能量传输等。下面安泰电子将带来高压放大器设计的意义和其所带来…

豆瓣酱生产加工污水处理需要哪些工艺设备

酱生产加工工程中&#xff0c;污水处理是一个至关重要的环节。豆瓣酱作为一种传统的食品调料&#xff0c;由于其酱豆和辅料的混合&#xff0c;往往会产生大量的污水。为了实现环境友好型生产&#xff0c;保护我们的大自然&#xff0c;豆瓣酱生产厂家需要采用一些科学先进的工艺…

SpringBoot 2.x 正式停更了。Java 8 由 Solon 接收!

最近有好多个新闻说&#xff1a;SpringBoot 2.x 正式停更了&#xff0c;Java 8 怎么办&#xff1f;当然用 Solon 喽&#xff01; Solon&#xff0c;同时支持 jdk8, jdk11, jdk17, jdk21。也支持 graalvm native image。既支持 java8&#xff0c;也支持 java21 的&#xff1a; …

基于springboot+vue的网上订餐系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…

Baumer工业相机堡盟工业相机如何联合NEOAPI SDK和OpenCV实现Mono12和Mono16位深度的图像保存(C#)

Baumer工业相机堡盟工业相机如何联合BGAPI SDK和OpenCVSharp实现Mono12和Mono16位深度的图像保存&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机保存位深度12/16位图像的技术背景代码案例分享1&#xff1a;引用合适的类文件2&#xff1a;NEOAPI SDK联合OpenCV进行图…

centos7 arm服务器编译升级安装动态库libstdc++.so.6,解决GLIBC和CXXABI版本低的问题

前言 由于centos7内置的libstdc.so.6版本太低&#xff0c;导致安装第三方包的时候&#xff0c;会报“CXXABI_1.3.8”不存在等问题。 自带的打印如下&#xff1a; strings /usr/lib64/libstdc.so.6 | grep GLIBC strings /usr/lib64/libstdc.so.6 | grep CXXABI 如图 升级 注…

数据结构之串

数据结构之串 1、串的定义及基本运算2、串的存储结构3、串的模式匹配 数据结构是程序设计的重要基础&#xff0c;它所讨论的内容和技术对从事软件项目的开发有重要作用。学习数据结构要达到的目标是学会从问题出发&#xff0c;分析和研究计算机加工的数据的特性&#xff0c;以便…

16bit半精度浮点加乘法(用于结果验证)-图形测试小程序(python)

测试&#xff1a; 代码如下&#xff1a; import tkinter as tk import struct from tkinter import Entry, Button, Labeldef float_to_binary_16(value):# 将浮点数转换为16位二进制表示binary_representation struct.pack(!e, value)binary_string .join(f{byte:08b} for…

Ubuntu20.4 Mono C# gtk 编程习练笔记(二)

界面设计习练后&#xff0c;下面写一些程序设计心得。 程序结构 先看一下程序总体结构&#xff0c;先在program.cs中找到main入口&#xff0c;在命名空间下是MainClass类&#xff0c;Main函数进入后首先建立应用程序环境 Application.Init&#xff0c;然后对MainWindow进行实…

css实现动态水波纹效果

效果如下&#xff1a; 外层容器 (shop_wrap)&#xff1a; 设置外边距 (padding) 提供一些间距和边距 圆形容器 (TheCircle)&#xff1a; 使用相对定位 (position: relative)&#xff0c;宽度和高度均为 180px&#xff0c;形成一个圆形按钮圆角半径 (border-radius) 设置为 50%&…

【性能调优】local模式下flink处理离线任务能力分析

文章目录 一. flink的内存管理1.Jobmanager的内存模型2.TaskManager的内存模型2.1. 模型说明2.2. 通讯、数据传输方面2.3. 框架、任务堆外内存2.4. 托管内存 3.任务分析 二. 单个节点的带宽瓶颈1. 带宽相关理论2. 使用speedtest-cli 测试带宽3. 任务分析3. 其他工具使用介绍 本…

生物识别规划人脸识别芯片方案的概述和特点

方案概述 人脸识别方案采用高性能AI芯片&#xff0c;支持RGB和IR摄像头&#xff0c; 支持LCD显示屏。 方案特点 • 普通RGB摄像头和IR摄像头同时参与3D成像RGB摄像头 支持屏幕回显 • 双目摄像头得到特征点视差计算人脸相 对3D深度信息&#xff0c; 同时利用可见光和红外 光谱信…

达梦数据库入门语法:从基础到进阶的指南

目录 博客前言&#xff1a; 达梦数据库语法介绍 一.创建表空间 1.图形化创建 2.语法创建 ​编辑​编辑 3.修改表空间参数 图形化修改 ​编辑​编辑 语法修改 4.设置加密算法、密码 二.创建用户 1.图形化 2.sql执行 ​编辑 3.授予权限 授予用户 DBA 权限 授予用户…

运算符和表达式

表达式 表达式是由运算符、运算量和标点符号组成的有效序列&#xff0c;其目的是用来说明一个计算过程&#xff0c;表达式可以独立成句&#xff0c;一般形式为&#xff1a; 表达式&#xff1b; 运算符 运算符可以按照功能分为&#xff1a;算术运算符、赋值运算符、关系运算…

【 文本到上下文 #4】NLP 与 ML

一、说明 欢迎回到我们的 NLP 博客系列&#xff01;当我们进入第四部分时&#xff0c;焦点转移到机器学习 &#xff08;ML&#xff09; 和自然语言处理 &#xff08;NLP&#xff09; 之间的动态相互作用上。在本章中&#xff0c;我们将深入探讨 ML 和 NLP 的迷人协同作用&#…