image.png
1. 在element UI中复制一个时间日期选择器组件
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
};
}
};
</script>
2. 在官方文档中找到发现可以自动以某日的样式的参数,找到picker-options
image.png
3. 改造 picker-options
- (小坑1) 为了让
function cellClassName(Date)能正常使用this, picker-options需要写在computed中 - (小坑2) 注意自己的日期格式
YYYY-MM-DD, 是否需要补0 - (小坑3) 使用
@focus获取数据在范围选择器中会触发两次, 待优化
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="customPickerOptions"
popper-class="el-date-picker-custom"
@focus="initCustomDate"
>
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: [],
customDateArr: [], // 存放'已标记'的日期数组
};
},
computed:{
customPickerOptions () {
let that = this
return {
cellClassName (Date) {
if (that.customDateArr.includes(that.$moment(Date).format('YYYY-MM-DD'))) {
// 自定义的类名, 自行确保这个类型的唯一性,以免覆盖样式
return 'custom_date_class'
}
}
}
}
},
methods:{
// 模拟异步获取哪些日期是 已标记 的
async initCustomDate (Date) {
setTimeout(() => {
this.customDateArr = ['2020-08-24', '2020-08-27', '2020-09-10', '2020-08-15']
}, 100)
}
},
};
</script>
4. 自定义样式
- (小坑4) 不能使用scoped局部作用域,所以我写到了app.vue中作为全局样式,也方便其他地方复用
// APP.vue
<style lang="scss">
// 日期时间选择器 已标记 样式
.custom_date_class {
span {
background: #ea6151;
color: red;
border-radius: 50%;
color: #fff !important;
&:hover {
background-color: #409eff;
}
}
&::after {
content: "已标记";
display: inline-block;
position: absolute;
width: 100%;
font-size: 12px;
color: red;
bottom: -15px;
left: 0;
text-align: center;
white-space: nowrap;
}
}
</style>
5. 继续优化样式
image
完成前4步,会出现上图的情况,选中日期时挡住了部分文字,再翻翻文档有什么可用参数,找到popper-class
image.png
找到元素所在的位置,进行样式覆盖
image.png
// APP.vue
<style lang="scss">
.el-date-picker-custom {
// 用了/deep/后不兼容ie,所以还是不要随便加上样式穿透,vue-cli3以上也不支持/deep/
// /deep/
.el-date-table td {
padding: 10px 0;
}
}
</style>
6. 待优化 获取数据的触发时机
- 使用
@focus获取数据在 范围选择器中会触发两次 - 有更好的方法或者发现写错以及可以优化的地方欢迎留言交流
