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

2023-12-20 16:27:06

一、首先明确下这个需求

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&

文章来源:https://blog.csdn.net/qq_41149508/article/details/135105732
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。