这篇文章主要为大家详细介绍了vue3.0实现考勤日历组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue3.0实现考勤日历组件使用的具体代码，供大家参考，具体内容如下
自定义日历组件，首先我们要明确需求与面板展示内容
1、周日~周六。
2、当前月日历1~（28/29/30/31），当前月1号如果不是周日，需要上月最后日历补全，当月最后一天不是周六需要下月开始日历补全。
3、切换至上月，切换至下月按钮
4、当前年月展示
5、如果某日有考勤异常，考勤异常日期标记
6、当前日期展示展示为‘今’
7、点击上月日期切换至上月面板并选中该日期弹出该日期考勤信息
8、点击下月日期切换至下月面板并选中该日期弹出该日期的考勤信息
9、点击当前月日期则选中当前日期并弹出该日期的考勤信息
首先日历面板实现
HTML结构如下
- 日
- 一
- 二
- 三
- 四
- 五
- 六
- {{ item.text }}
其中dateList为我们js计算出的当前面板应该展示的日历数组对象(包括上月的日期、当月日期和下月日期)，item.class为当前日期展示样式的类名(包括上月日期样式‘upMonth’，下月日期样式‘lastMonth’，假日样式‘Holiyday’，选中样式‘selected’，今天样式‘today’，请假样式‘leave’，考勤异常样式‘absent’)，item.date为日期（xxxx-xx-xx）,item.text为当前日，今天展示为‘今’，‘’标签用于展示考勤异常和请假，intraday方法为点击某日
面板渲染方式，实现dateList数组的计算
const MonthDay = ref([31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]); //确定每月天数 const calendar = (n, seletDay) => { //n为0表示当月，n为-1表示上月，n为1表示下月,seletDay默认选中日期 var oDate = new Date(); //定义时间 oDate.setMonth(oDate.getMonth() + n); //设置月份， year.value = oDate.getFullYear(); //年，获取当前年份 month.value = oDate.getMonth(); //月，获取当前月份（0-11） var allDay = MonthDay.value[month.value]; //计算本月有多少天 var upMonthDay = MonthDay.value[month.value == 0 ? 11 : month.value - 1];//计算上个月有多少天 //判断闰年，如果是闰年的2月份，当月总天数为29天 if (month.value == 1) { if ( (year.value % 4 == 0 && year.value % 100 != 0) || year.value % 400 == 0 ) { allDay = 29; } } //判断本月第一天是星期几 oDate.setDate(1); //时间调整到本月第一天 var weekStar = oDate.getDay(); //读取本月第一天是星期几 oDate.setDate(allDay); //时间调整到本月最后一天 var weekEnd = oDate.getDay(); //读取本月最后一天是星期几 var dateArry = []; //上月日期插入数组 for (var j = upMonthDay - weekStar; j 上月、下月切换按钮点击实现
html部分:
<-- 切换至上月-->{{ month + 1 }}月{{ year }}年
<-- 切换至下月-->
js部分：
// 向上翻月 const upMonth = (day) => { monthDate = ""; total.obj = ""; normally.value = true; calendar(--iNow, day); }; // 向下翻月 const lastMonth = (day) => { monthDate = ""; total.obj = ""; normally.value = true; calendar(++iNow, day); };点击某日intraday方法
// 点击日历图上某天 const intraday = async (item, date) => { if (item.class.indexOf("upMonth") > -1) { //如果点击的是上月日期则切换到上月日历面板 upMonth(item.day); return; } if (item.class.indexOf("lastMonth") > -1) {//如果点击的是下月日期则切换到下月日历面板 lastMonth(item.day); return; } //点击当前月日期 upitem.class[upitem.class.indexOf("selected")] = null; //上次点击日期去除选中样式 item.class.push("selected"); //当前点击日期加上选中样式 upitem = item; };以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是vue3.0实现考勤日历组件使用详解的详细内容，更多请关注0133技术站其它相关文章！
