写在前面
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
组件地址