修改elementUI中el-date-picker内置样式
Posted 半山归墅
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了修改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里的配置项,建议将该配置换成插槽用模板的形式来写,写到插槽里后,步骤和上面一致。
新人发文,欢迎各位大佬指正。
2022-05-22 el-date-picker使用问题
参考技术A 平时做项目,或者搭建项目时候,一定要注意国际化的问题。本人自己的demo做了个国际化文件,但是忘记引用elementUI的国际化文件。导致,el-date-picker疯狂的报错。不出效果。但是在实际项目中完全没有问题。。。。查阅大量文章都没有找到对应问题。。。。最后自己没事儿看了下国际化的文件,突然发现!本地国际化文件有问题!!!!如果不用国际化,直接出来,不会报错的。。。。。用上了就开始报错。特此记录。。。。。使用el-date-picker一定注意国际化文件的问题。还有DatePicker iview提供的也是一样。
以上是关于修改elementUI中el-date-picker内置样式的主要内容,如果未能解决你的问题,请参考以下文章
elementui el-date-picker 组件值回显