el-date-picker日期时间插件只允许选择年月日小时并做可选择范围限制(精确到小时的范围)

一、首先明确下这个需求

1、要求只能选择年月日时,不要分钟和秒
2、根据后台返回的开始时间和天数设置可选择的开始时间和结束时间范围(包含小时)比如后台返回的开始时间是2023-12-20 13:24:30,天数365天,那么我们需要限制当前可选日期为2023-12-20 14时(不能选小于13:24:30的) 截止日期为 2024-12-18 13时
3、虽然页面选择的是年月日小时,但是传给后台的还需要年月日时分秒,需要自动拼接00:00,比如选择了2023-12-21 14,那么拼接成2023-12-21 14:00:00

二、理解需求了开始开发

首先el-date-picker没有明确的属性和方法可以取消分钟和秒,只能先用value-format="yyyy-MM-dd HH" format="yyyy-MM-dd HH"来只获取年月日小时,但是这样会展示出年月日时分,只能把分钟隐藏掉,最简单的办法是通过css设置.el-time-spinner__wrapper{width:100%}但是这样就会全局修改插件影响插件在别的模块的使用,查过很多方法无论是用::v-deep还是先自定义个calss都无法生效,
只能通过 document.getElementsByClassName('el-time-spinner')[0].children[1].style.display = "none";//隐藏分钟
整体代码如下,需要注意点会在后面详细说明

<template><div style&

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

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

相关文章

嵌入式系统复习--ARM指令集(一)

文章目录 上一篇ARM指令集概述ARM寻址方式下一篇 上一篇 嵌入式系统复习–ARM技术概述 ARM指令集概述 ARM指令集是32位的&#xff0c;程序的启动都是从ARM指令集开始。 指令编码 第一操作数 第二操作数 目的操作数 条件影响标志位 不同功能实现的二进制位 指令编码 第…

银行敏捷转型对员工有哪些要求,供参考

银行进行敏捷转型时&#xff0c;对员工通常有一些要求和期望&#xff1a; 灵活性和适应性&#xff1a; 员工需要具备适应快速变化和不断迭代的工作环境的能力。他们需要对变化持开放态度&#xff0c;并愿意适应敏捷方法所带来的灵活性。 跨职能团队合作&#xff1a; 敏捷转型强…

华清远见嵌入式学习——ARM——作业2

目录 作业要求&#xff1a; 现象&#xff1a; 代码&#xff1a; 思维导图&#xff1a; 模拟面试题&#xff1a; 作业要求&#xff1a; GPIO实验——3颗LED灯的流水灯实现 现象&#xff1a; 代码&#xff1a; .text .global _start _start: /************对led1的设置****…

Java8新特性 Stream

首先创建一个用户的实体类&#xff0c;包括姓名、年龄、性别、地址、赏金 几个属性 Data public class User {//姓名private String name;//年龄private Integer age;//性别private Integer sex;//地址private String address;//赏金private BigDecimal money;public User(St…

【解决Typora图片不是显示问题】PicGo+Github+Typora+ onedrive/坚果云 实现笔记同步

【解决Typora图片不是显示问题】PicGo、Github、Typora实现笔记同步 写在前面&#xff1a; typora笔记软件使用记录typora图片上传问题&#xff1a;原因分析&#xff1a;解决方案&#xff1a;PicGoGithubTypora 坚果云/onedrive 实现笔记同步第一步. 设置上传模式&#xff1a;u…

华为安防监控摄像头

华为政企42 华为政企 目录 上一篇华为政企城市一张网研究报告下一篇华为全屋wifi6蜂鸟套装标准

Hypervisor Display架构

Hypervisor Display架构部分 1&#xff0c;所有LA侧的APP与显示相关的调用最终都会交由SurfaceFlinger处理 2&#xff0c;SurfaceFlinger会最终调用android.hardware.graphics.composer2.4-service服务 3&#xff0c;android.hardware.graphics.composer2.4-service服务会调用G…

一、神经元与激活函数

神经网络是一种大规模的并行分布式处理器&#xff0c;天然具有存储并使用经验知识的能力。它从两个方面上模拟大脑:(1)网络获取的知识是通过学习来获取的;(2)内部神经元的连接强度&#xff0c;即突触权重&#xff0c;用于储存获取的知识。—— Haykin [1994] 生物学家在20世纪初…

CSS之em、px、rem的区别

前端 作为一个前端开发工程师&#xff0c;关于这些长度单位还是得了解一下。虽然在日常的开发中px、%用的多些&#xff0c;也会用到vh、vw&#xff0c;其他的虽然用的少但也得了解&#xff0c;说不定就能解决你样式中的问题呢。 计量单位 在css中计量单位分相对长度单位和绝…

XILINX-Zynq UltraScale+MPSoc 开发笔记

1. 资料信息 2. IDE集成开发环境 3. petalinux开发 3.1 环境搭建 1. 创建一个ubuntu18.04&#xff08;或者其他版本&#xff09;&#xff0c;根据UG1144文档安装ubuntu下对petalinux的依懒工具。 2. 下载petalinux对应版本&#xff0c;链接&#xff1a;Downloads (xilinx.co…

【mysql】出错 Subquery returns more than 1 row

问题 查找出一下子查询返回超过1行 SELECT cc.id,DATE_FORMAT(cc.CREATE_TIME,%Y%m%d) as day_id, IFNULL((select f.source FROM strong_contact_fea f where f.id cc.id and STR_SPEC_IDS2023091145),10501) as strong_prod_level_1, IFNULL((select f.source from stron…

Python---端口和端口号的介绍

1. 问题思考 不同电脑上的飞秋之间进行数据通信&#xff0c;它是如何保证把数据给飞秋而不是给其它软件呢? 其实&#xff0c;每运行一个网络程序都会有一个端口&#xff0c;想要给对应的程序发送数据&#xff0c;找到对应的端口即可。 端口效果图: 2. 什么是端口 端口是传…

iOS将framework转为xcframework

拆分framework 先把framework拷贝到两个文件夹下边&#xff0c;这里只需要armv7、arm64、x86_64。 mkdir iphoneos iphonesimulator cp -R mysdk.framework iphoneos cp -R mysdk.framework iphonesimulator 把iphoneos中的模拟器指令集删除&#xff0c;只保留armv7和arm64 …

电巢助力第十届图像技术高峰论坛圆满落幕,回顾西电与电巢的校企合作四年硕果累累

图像技术高峰论坛圆满落幕 12月17日&#xff0c;由中国图象图形学学会、陕西省科学技术协会主办、西安电子科技大学通信工程学院、陕西省创新驱动共同体承办的“第十届图像技术高峰论坛暨陕西第五届图像处理与分析研讨会”在陕西西安成功举办。电巢科技作为本次论坛的承办单位&…

某电子文档安全管理系统 SQL注入漏洞复现

漏洞介绍 亿赛通电子文档安全管理系统 (简称: CDG)是一款电子文档安全加密软件&#xff0c;该系统利用驱动层透明加密技术&#xff0c;通过对电子文档的加密保护&#xff0c;防止内部员工泄密和外部人员非法窃取企业核心重要数据资产&#xff0c;对电子文档进行全生命周期防护…

RHCE8 资料整理(十二)

RHCE8 资料整理 第 33 章 jinja2模板的使用31.1 if 判断33.2 for循环33.3 handlers 第 33 章 jinja2模板的使用 详细参考 https://blog.csdn.net/u010230019/article/details/128561872 https://blog.csdn.net/u010230019/article/details/128477679 假设目前Nginx的配置文件在…

未来仓储新玩法小空间做大文章

身处智能消费时代的大家都应该有深刻感受&#xff0c;物流速度在逐年增快。根据国家邮政局预估&#xff0c;2020 年快递业务吞吐量超 740 亿件&#xff0c;同比增长 18%。 面对日益增加的商品交付量&#xff0c;不得不重新定义产品分销方式&#xff0c;从而满足当今互联网消费…

从零开始学HBase:打造你的大数据技能库!

介绍&#xff1a;HBase是一个分布式的、面向列的开源数据库&#xff0c;源于Fay Chang所撰写的Google论文“Bigtable&#xff1a;一个结构化数据的分布式存储系统”。类似于Bigtable利用了Google文件系统&#xff08;File System&#xff09;提供的分布式数据存储&#xff0c;H…

<八>JavaScript中的对象及对像的增删改查

使用基本数据变量所创建的变量都是独立的&#xff0c;不能成为一个整体&#xff0c;对象属于复合型的数据类型&#xff0c;在对象中可以保存多个不同的数据类型的属性。 一、对象的分类 1.1内建对象 由ES标准中定义的对象 比如&#xff1a;Match、String、Number、Boolean、…

【Qt】Qt Creator 警告: Unused parameter ‘xxx‘

1. 问题 Qt开发中&#xff0c;有些函数参数没有使用&#xff0c;会报Unused parameter xxx警告&#xff0c;这个警告不影响代码正常运行。 2. 屏蔽这个警告的方法 2.1 方法1 函数中添加 Q_UNUSED(arg); TestClass::TestClass(QObject *parent) {Q_UNUSED(parent); }2.2 方…