vue3.0实现考勤日历组件使用详解_vue.js_

       
日
       
一
       
二
       
三
       
四
       
五
       
六
     
     
       
         
{{ item.text }}
                
     

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 < upMonthDay; j++) {         let obj = {           class: ["upMonth"],             date:             year.value +             "-" +             (month.value < 10 ? "0" : "") +             (month.value + 1 - 1) +             "-" +             (j < 9 ? "0" : "") +             (j + 1),           text: j + 1,           day: j + 1,         };         dateArry.push(obj);       }       //当月日期插入到dateList       for (var i = 1; i <= allDay; i++) {         let obj = {           class: [],           date:             year.value +             "-" +             (month.value < 9 ? "0" : "") +             (month.value + 1) +             "-" +             (i < 10 ? "0" : "") +             i,           text: i,           day: i,         };           //判断是否当月(非当月)         if (           year.value != today.getFullYear() ||           month.value != today.getMonth()         ) {           if (seletDay && seletDay != "n") { //存在默认选中日期时             if (i == seletDay) {               obj.class.push("selected"); //默认选中传入日期               upitem = obj;             }           } else if (i == 1) { //没有默认选中日期时默认选中1号             //判断是否是1号             obj.class.push("selected"); //默认选中1号             upitem = obj;           }         }else { //(当月)           // 判断是否当天          if (format(today) == obj.date) { //(当天)             obj.class.push("today");             obj.text = "今";             if(!seletDay || seletDay == "n"){ //没有默认选中日期时默认选中‘今天'                obj.class.push("selected");                upitem = obj;             }           }else{               if (seletDay && seletDay != "n") { //非当天                 if (i == seletDay) {                   obj.class.push("selected"); //默认选中传入日期                   upitem = obj;                 }               }           }         }           if (findDate(monthDate, 'perday', obj.date)!=-1) {            var k = findDate(monthDate, 'perday', obj.date);            //判断是否节假日           if (monthDate[k].isworkday == "否") {             obj.class.push("Holiyday");           } else if (  //判断考勤异常             monthDate[k].attendflags != "迟到"           ) {             obj.class.push("absent");           } else if (             //判断请假             monthDate[k].leaveflags == "请假"            ) {             obj.class.push("leave");           }         }         dateArry.push(obj);       }       //下月日期插入到dateList       for (var k = 1; k <= 6 - weekEnd; k++) {         let obj = {           class: ["lastMonth"],           date:             year.value +             "-" +             (month.value < 8 ? "0" : "") +             (month.value + 1 + 1) +             "-" +             (k < 10 ? "0" : "") +             k,           text: k,           day: k,         };         dateArry.push(obj);       }       dateList.List = dateArry;     };

       <-- 切换至上月-->              
         {{ month + 1 }}月{{ year }}年       
        <-- 切换至下月-->       

//  向上翻月     const upMonth = (day) => {       monthDate = "";       total.obj = "";       normally.value = true;       calendar(--iNow, day);     };     //  向下翻月     const lastMonth = (day) => {       monthDate = "";       total.obj = "";       normally.value = true;       calendar(++iNow, day);     };

// 点击日历图上某天     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;     };