vue+element 日期选择器 (已标记功能)

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

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. 继续优化样式

完成前4步,会出现上图的情况,选中日期时挡住了部分文字,再翻翻文档有什么可用参数,找到popper-class

找到元素所在的位置,进行样式覆盖

// 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 获取数据在 范围选择器中会触发两次
• 有更好的方法或者发现写错以及可以优化的地方欢迎留言交流