Calendar calendar控件的月份添加点击事件
Calendar calendar控件的月份添加点击事件
何处锦绣不灰堆
发布于 2021-03-05 10:58:08
发布于 2021-03-05 10:58:08
写在前面
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 组件地址
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-03-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录