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

置顶 swagLi

已于 2023-12-20 14:42:55 修改

阅读量3.8k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue、elementUI、音视频通信、echarts实战文章标签： vue.js 前端 javascript

于 2023-12-20 14:30:55 首次发布

本文链接：https://blog.csdn.net/qq_41149508/article/details/135105732

vue、elementUI、音视频通信、echarts实战专栏收录该内容

25 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用Vue.js的el-date-picker组件实现仅选择年月日小时的功能，并根据后台返回的数据设置可选时间范围。在处理过程中，遇到分钟和秒无法隐藏的问题，通过CSS全局修改会影响其他模块。最后，展示了如何在选择年月日小时后自动拼接00:00以满足后台需要的完整日期时间格式。

`一、首先明确下这个需求`

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";//隐藏分钟
整体代码如下，需要注意点会在后面详细说明

<te

了解本专栏

超级会员免费看