elementplus 中 DatePicker 日期选择器样式修改无效的问题及解决方案

elementplus 中 DatePicker 日期选择器样式修改无效

问题

遇到一个需求需要修改 DatePicker 日期选择器的样式，在添加了 scoped 属性的 style 标签，并且使用了 deep 样式穿透的情况下并不能修改其样式。

原因

DatePicker 日期选择器弹出面板默认挂载在 body 上，所以在组件中添加了 scoped 属性的 style 标签下是修改不到其样式的。

解决

官网中提供了一个给弹出面板设置 class 类名的属性——popper-class，通过该属性添加类名后选择该类名来修改样式即可。

需要注意的是，虽然官网提供了该属性，但是我们通过属性来修改样式的时候也并不能改变弹出面板是挂载在 body 的事实，所以我们要修改其样式的话需要把 scoped 属性去掉才行，我们可以添加一个新的不带 scoped 属性的 style 标签来对其样式进行修改。代码如下：

<template>
  <el-date-picker
     v-model="time"  
     type="datetime"
     placeholder="请选择时间"
     popper-class="date-cell">
  </el-date-picker>
</template>
<style scoped lang="scss">
	...//组件内部样式
</style>
<style lang="scss"> //去掉 scoped 属性
	...//时间选择器样式
</style>

补充介绍datepicker的使用方法

===导语：前一章已经实现了点击输入框弹出datepicker日期插件，但业务的处理逻辑放在哪里还未解决。此章主要介绍datepicker的使用方法，以及常见的配置项和对应的值。

使用方法：

方法很简单$(‘selector’).datepicker({});此方法内包含着配置参数的对象，根据需要按需配置即可。
*需要注意的是：因为此插件的调用默认事件是focus或者是button所以在写html时就选择input或者是button元素。

常见配置项：

1.minDate：最小可选日期*
值：日期或数字或字符串
==日期：包含最小日期的日期对象。
== 数字：从今天开始的几天。例，2代表从今天开始的两天，-1代表昨天。
==字符串：由dateFormat选项定义的格式的字符串，或相对日期。
相对日期 必 须包含值和期间对; 有效期为数"y"年，
"m"数 月，“w"数周和数"d"天。例如，”+1m +7d"代表
从今天起一个月零七天。

2.maxDate：最大可选日期
值：日期或数字或字符串（同上）
默认为null，没有最大值。

3.dateFormat：日期格式
值：字符串
默认：“mm/dd/yy”
4.monthNames：月份名称
值：包含12个月份的数组（主要用于本土化）
默认： [ “January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December” ]
5.dayNamesMin：列标题
值：包含周日到周六的数组（主要用于本土化）
默认：[ “Su”, “Mo”, “Tu”, “We”, “Th”, “Fr”, “Sa” ]
6.showMonthAfterYear：年月显示顺序
值：布尔值
默认：false
7.beforeShow:日期面板显示之前的处理函数（处理业务中面板显示与否相关的逻辑）
默认：null
功能：获取输入字段和当前datepicker实例并返回选项对象以更新datepicker的函数。它在显示datepicker之前调用。
8.beforeShowDay：面板显示之前可以为每个日期做处理的函数（处理业务中对日期的相关处理逻辑）
值：一个以日期作为参数的函数，必须返回一个数组：
[0]：true/ false表示此日期是否可选
[1]：要添加到日期单元格的CSS类名称
[2]：此日期的可选弹出工具提示语
默认： null
*在显示日期选择器之前，每个日期都会调用该函数。（相当于对每个日期遍历，此函数会被调用多次）

以上只是在此项目中用到的一些方法，具体其他的参数，值，以及函数的使用方法请参考datepicker官网

项目中的遇到的问题，及解决办法：

项目需求：
只有后台返回的日期时间可以选择，之外的日期都不可点。
已取得：
由以上的文档，可以得知处理业务中面板显示与否相关的逻辑应该放在beforeShow对应的处理函数中。
处理业务中对日期的相关处理逻辑应该放在beforeShowDay对应的处理函数中。
存在问题：
处理完毕后插件的整体处理逻辑没有问题了，但是重新写的样式无法覆盖原来的样式代码。

改造前代码：

日期插件内部样式改动找到对应的样式类名重新定义就可以，此处不在贴代码。但是点击输入框弹出插件时样式未被覆盖上。

因为此插件的样式要在点击后插件弹出来之前触发，此插件已经给这个输入框绑定上了focus事件，再绑定个click事件，在此事件内做样式修改不就可以了！
经实验，可用。

改造后代码：

总结：
1.$(‘selector’).datepicker({})默认已经绑定focus或者button事件触发，无需再次绑定对应事件。
2.处理业务中面板显示与否相关的逻辑应该放在beforeShow对应的处理函数中。
3.对日期的相关处理逻辑应该放在beforeShowDay对应的处理函数中。
4.再绑定个click事件，在此事件内做样式修改。

**最重要的还是先看官网文档，避免做很多无用功！！！！！

到此这篇关于elementplus 中 DatePicker 日期选择器样式修改无效的问题及解决方案的文章就介绍到这了,更多相关DatePicker 日期选择器样式修改无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！