elementUI实现日期框选中项文本高亮

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

{ margin: 0; font: 12px "Helvetica Neue" }
p.p2 { margin: 0; font: 12px "PingFang SC" }
span.s1 { font: 12px "Helvetica Neue" }

需求：由于月份选择框会给默认接收的月份文本加入高亮显示，但需求要求将选中的月份标记高亮展示。

实现：使用elementUI的日期选择器提供的下拉框样式配置，并改写对应的样式实现。

懒得说话，直接上代码：

<template>
<div>
<dataPickSelf
size='mini'
v-model="scope.row.dateTime"
type="month"
:picker-options="pickerOptions"
:clearable="false"
:popper-class='dataPick'
value-format="yyyy-MM"
ref="dateMonth"
>
</dataPickSelf>
</div>
</template>
<script>
import {DatePicker} from 'element-ui';
export default {
data() {
return {
maxTime: '',
dataPick: 'monthtime',
pickerOptions:{
disabledDate: time => {
return this.timeRe(time);
},
}
}
},
components: {
dataPickSelf:DatePicker
},
methods: {
timeRe(time) {
return time.getTime() >=new Date(this.maxTime).getTime() ;
}
}
}
</script>
<style lang="less" scoped>
.monthtime .el-month-table td.current:not(.disabled) .cell{
font-weight: bold !important;
color:#182452 !important;
}
.monthtime .el-month-table td.today .cell{
color: #182452;
}
.monthtime .el-month-table td.current ~ td.today .cell{
color: #606266;
}
.monthtime .el-month-table td.current ~ td.disabled.today .cell{
color: #C0C4CC !important;
}
.monthtime .el-month-table tr td.disabled.today .cell{
color: #C0C4CC !important;
}
.monthtime .el-month-table tr td.disabled.today .cell{
color: #C0C4CC !important;
}
.monthtime .el-month-table td.today .cell {
font-weight: normal;
}
.monthtime .el-month-table td.today .cell {
color: #606266;
}
</style>