el-date-picker限制一个月范围（修改elementUI中el-date-picker内置样式）
一.编写背景
今天正在日常的需求编写和bug调试中 ，产品提出了这样一个需求 。为了满足用户在新增数据时的便捷准确 ，时间选择格式为“年月日时 ” ，即用户不需要选择分合秒 ，换句话说就是下图中红色框的两项不需要 。
二.问题分析 。
当时了解到产品的需求时 ，第一时间还不知道思路怎么做 。因为在日常的“板砖模式 ”开发中 ，我都习惯了elementUI的代码粘贴 ，找了以下el-date-picker的配置项也没发现省略这两项的配（可能是我找的不太仔细z_z） 。最后能想到的就是样式穿透来对这两项进行隐藏 。
三.问题解决 。
F12弹出控制台审查了一下元素 ，找到分秒所在元素位置 。
但是想要穿透样式来修改 ，项目中所有用到该组件的datetime-picker都会被改动 ，所以需要给当前的时间选择弹出层加一个仅有的类名来修改 。elementUI官方文档给出了popper-class这么一个属性用来给弹出框加类名 。
找到对应类名下的对分秒两项进行隐藏(隐藏方式不唯一) ，我这里选择对时这一项设置宽度为100%就好了 。
这时刷新页面就可以看到分秒两列被隐藏了 ，但是为了让时间显示更良好 ，在选中日期后的展示效果也要精确到时 ，配置format="yyyy-MM-dd HH"以及value-format="yyyy-MM-dd HH" 。修改效果如下图所示：
四.总结 。
1.给el-date-picker组件弹出框加上popper-class属性自定义类名；
2.审查元素找到对应的元素为其修改样式；
3.再做一些相关联反应的配置 。
另外 ，我的项目所用的是avue框架 ，如果el-date-time组件是avue中option里的配置项 ，建议将该配置换成插槽用模板的形式来写 ，写到插槽里后 ，步骤和上面一致 。
新人发文 ，欢迎各位大佬指正 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！