element-ui日历组件el-calendar选中特定时间以及样式修改

在Element UI中，要设置el-calendar组件中日期的选中状态以及修改样式，可以通过以下方法：

1. 使用range-state属性来设置特定日期的选中状态。
2. 使用CSS覆盖默认样式。

以下是一个简单的例子，展示如何设置特定日期的选中状态以及修改日历组件的样式：

<template>
  <el-calendar v-model="value" :range-state="markRange">
  </el-calendar>
</template>
 
<script>
export default {
  data() {
    return {
      value: new Date()
    };
  },
  methods: {
    // 标记特定日期的选中状态
    markRange(date) {
      const specialDay = new Date(2023, 2, 15); // 特定日期
      return date.getTime() === specialDay.getTime() ? 'selected' : '';
    }
  }
};
</script>
 
<style>
/* 修改选中日期的样式 */
.el-calendar__body .selected .el-calendar-day {
  color: #fff;
  background-color: #409eff;
  border-radius: 50%;
}
 
/* 修改今天日期的样式 */
.el-calendar__body .is-today .el-calendar-day {
  color: #409eff;
  font-weight: bold;
}
</style>

在这个例子中，markRange方法用来标记2023年3月15日的日期为选中状态。CSS部分用来修改被标记的日期和今天日期的样式。在实际应用中，你可以根据需要修改markRange方法中的日期以及CSS中的样式。