Calendar calendar控件的月份添加点击事件

写在前面

elementui在使用日历也就是Calendar calendar控件的时候，发现它自带的上个月、今天、下个月是没有提供点击事件的，但是博主我做业务的时候用到了，因为排班的时候想要获取到上个月的信息需要给月份的信息，所以今天记录一下解决的办法！

添加事件

• 在created的钩子函数中实现如下代码

this.$nextTick(() => {
        // 点击上个月
        let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
        prevBtn.addEventListener('click', () => {
          console.info(this.valueData)
         this.dateFormat('YYYY-mm-dd',this.valueData)
        })
        // 点击今天
        let currBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
        currBtn.addEventListener('click', () => {
         console.info(this.valueData)
         this.dateFormat('YYYY-mm-dd',this.valueData)
        })
        // 点击下个月
        let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
        nextBtn.addEventListener('click', () => {
         console.info(this.valueData)
         this.dateFormat('YYYY-mm-dd',this.valueData)
        })
      })

时间格式化代码

     /**
       * @param {Object} fmt 需要的时间格式 例如：'YYYY-mm-dd'
       * @param {Object} date  格林尼治时间 
       */
      dateFormat(fmt, date) {
        let ret;
        const opt = {
          "Y+": date.getFullYear().toString(), // 年
          "m+": (date.getMonth() + 1).toString(), // 月
          "d+": date.getDate().toString(), // 日
          "H+": date.getHours().toString(), // 时
          "M+": date.getMinutes().toString(), // 分
          "S+": date.getSeconds().toString() // 秒
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          };
        };
        return fmt;
      },

打印结果

注意的点

valueData这个参数就是我们data中定义的，也就是需要我们在return中定义valueData: new Date(),然后我们的Calendar calendar控件将其绑定才可以自动计算每个月份，代码如下：

<el-calendar v-model='valueData' v-loading="loading" style="margin-top: 10px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div class="currCalendarSty" @dblclick="calendarOnClick(data,date)">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
              </p>
              <el-row :gutter="20">
                <el-col :span="12" v-for="item in schdules[data.day]" :key="item.id" class="text item">
                  <div style="display: flex;flex-direction: column;justify-items: center;align-items: flex-start">
                    <div style="font-weight: bold">{{item.shifts !==null ? item.shifts.name : '未设置班次'}}</div>
                    <div>{{item.useralias}}
                      <el-tag v-if="item.user_status && item.user_status!==' '" size="mini" type="success">{{item.user_status}}</el-tag>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
        </template>
 </el-calendar>

结束

具体每一个时间块上怎么显示，点击事件什么这里就不写了，第一是官方有，第二是自己也比较容易实现，这里需要说一个点，官方给的参数用好的话可以事半功倍，{ type, isSelected, day}，type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd
组件地址