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&

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-21 10:28:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-21 10:28:01       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-21 10:28:01       82 阅读
  4. Python语言-面向对象

    2023-12-21 10:28:01       91 阅读

热门阅读

  1. C语言第五十四弹---模拟使用strstr函数

    2023-12-21 10:28:01       60 阅读
  2. Avalonia MVVM

    2023-12-21 10:28:01       56 阅读
  3. 栈(C++)

    2023-12-21 10:28:01       42 阅读
  4. vim的使用

    2023-12-21 10:28:01       57 阅读
  5. 服务器不稳定因素

    2023-12-21 10:28:01       53 阅读
  6. js new Set()过滤重复数据

    2023-12-21 10:28:01       58 阅读
  7. Linux下修改host文件

    2023-12-21 10:28:01       59 阅读
  8. c语言突击函数

    2023-12-21 10:28:01       75 阅读
  9. 【数据爬取】Jsoup爬取数据的使用

    2023-12-21 10:28:01       59 阅读