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
组件地址

何处锦绣不灰堆 CSDN认证博客专家 vue nodejs git
人系于妻子舍宅,甚于牢狱。牢狱有散释之期,妻子无远离之念。情爱于色,岂惮驱驰。虽有虎口之患,心存甘伏。投泥自溺,故曰凡夫。透得此门,出尘罗汉。
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值