当前位置: 首页 > news >正文

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.lryc.cn/news/265153.html

相关文章:

  • 在MongoDB中使用数组字段和子文档字段进行索引
  • <JavaEE> 网络编程 -- 网络编程和 Socket 套接字
  • 【计算机系统结构实验】实验2 流水线中的冲突实验
  • conda环境下执行conda命令提示无法识别解决方案
  • 链接未来:深入理解链表数据结构(二.c语言实现带头双向循环链表)
  • 论文笔记 | Nature 2023 FunSearch:利用大语言模型在数学科学领域探索新的发现
  • JavaScript 对象和 JSON 字符串的区别
  • 基于 Flink SQL 和 Paimon 构建流式湖仓新方案
  • MFC静态链接+libtiff静态链接提示LNK2005和LNK4098
  • 桶装水送水小程序:提升服务质量的利器
  • 深度学习在训练什么,什么是模型
  • Andorid 使用bp或者mk编译C文件生成so
  • 只更新软件,座椅为何能获得加热功能?——一文读懂OTA
  • EfficientDet:Scalable and Efficient Object Detection中文版 (BiFPN)
  • 视频监控技术经历了哪些发展阶段?视频监控技术未来趋势展望
  • 德人合科技 | 设计公司文件加密系统——天锐绿盾自动智能透明加密防泄密系统
  • 类和对象(下篇)
  • 华为鸿蒙(HarmonyOS):连接一切,智慧无限
  • 劈窗算法反演地表温度
  • 持续集成交付CICD:基于ArgoCD 的GitOps 自动化完成前端项目应用发布与回滚
  • SSH无密登陆配置
  • 【bug日记】如何切换jdk版本,如何解决java和javac版本不一致
  • 【C语言】6-5 判断回文字符串 分数 20
  • STL中优先队列(堆)的详解
  • @vue/cli脚手架
  • 在 MyBatis 中<应该怎么写
  • 采访亚马逊云科技代闻:深度解读2023re:Invent与生成式AI
  • 黑豹程序员-安装docker-ce
  • 多臂老虎机算法步骤
  • pgsql的jsonb相关处理及样例