element 日历组件应用相关的问题

1.使用element日历组件会自带按钮组，要实现切换时间的时候去获取相关月份的排班数据，但是按钮组并不存在于日历组件中

<el-calendar v-model="value"> </el-calendar>

解决方法：watch监听日历组件绑定的value值，当value值变化后去请求日历组件数据

 

需要注意，只有当两次的月份不一致时才去获取数据

2.日历组件早于当天的日期样式区别于将来的日期

解决方法：用插槽里每一项的的日期转时间戳去和现在的时间戳做对比，如果早于现在的时间则显示另一种样式

注意：日历中的时间是默认获取的当天的08:00:00，所以比较的时候不能直接拿new Date()去比较，比较巧妙的办法是获取当天的时间然后自己手动去拼上时分秒，这样就完美啦~

     // 获取当天08:00:00的时间，与日历中时间戳相比较(日历中的时间默认为08:00)
    let date = new Date();
    let compareDate = date.getFullYear() + '-' + Number(date.getMonth() + 1) + '-' + date.getDate() + ' 08:00:00';
    this.compareDate = new Date(compareDate);

3.修改日历组件自带的按钮组中的文字

解决方法：操作原生dom获取按钮组的中第2项的span元素，将 今天 改成  本月

mounted() {
   
    this.$nextTick(() => {
      // 更改element原生日历组件中按钮文字由今天改成本月
      let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)>span');
      prevBtn.innerHTML = '本月';
    })
 
  }

修改效果如下：

 

4.日历组件只显示当月日期

element日历组件会默认显示如下，本月第一行日期不是从周一开始时会补全第一行的日期，后一行也会补全

解决方法：非正规方法，是通过class类来实现，日历组件中上一个月的td标签的class为prev，下一个月为next，这里通过控制使用visibility: hidden来隐藏，不可用display: none ，如果使用display: none 则原有的日历组件会跑偏，故需要使用visibility: hidden来隐藏

 

 

.el-calendar-table:not(.is-range) td.next,
.el-calendar-table:not(.is-range) td.prev {
  visibility: hidden;

}

visibility: hidden和display: none 的区别

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无，即在网页中不占任何的位置。

最终实现效果如下所示