亲宝软件园·资讯

展开

vue3.0考勤日历组件

捕风的紫色鸢尾 人气:1

自定义日历组件,首先我们要明确需求与面板展示内容

1、周日~周六。
2、当前月日历1~(28/29/30/31),当前月1号如果不是周日,需要上月最后日历补全,当月最后一天不是周六需要下月开始日历补全。
3、切换至上月,切换至下月按钮
4、当前年月展示
5、如果某日有考勤异常,考勤异常日期标记
6、当前日期展示展示为‘今’
7、点击上月日期切换至上月面板并选中该日期弹出该日期考勤信息
8、点击下月日期切换至下月面板并选中该日期弹出该日期的考勤信息
9、点击当前月日期则选中当前日期并弹出该日期的考勤信息

首先日历面板实现

HTML结构如下

<ul class="week">
      <li>日</li>
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
    </ul>
    <ul class="dateList">
      <li
        v-for="item in dateList.List"
        @click="intraday(item, item.date)"
        :class="item.class"
        :date="item.date"
        :key="item"
      >
        <div>{{ item.text }}</div>
        <i></i>
      </li>
    </ul>

其中dateList为我们js计算出的当前面板应该展示的日历数组对象(包括上月的日期、当月日期和下月日期),item.class为当前日期展示样式的类名(包括上月日期样式‘upMonth’,下月日期样式‘lastMonth’,假日样式‘Holiyday’,选中样式‘selected’,今天样式‘today’,请假样式‘leave’,考勤异常样式‘absent’),item.date为日期(xxxx-xx-xx),item.text为当前日,今天展示为‘今’,‘<i></i>’标签用于展示考勤异常和请假,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 < 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;
    };

上月、下月切换按钮点击实现

html部分:

<div class="calendarTitle">
      <-- 切换至上月-->
      <img
        class="upMonth"
        src="../assets/images/up.png"
        @click="upMonth('n')"  //传入‘n'表示没有默认选中
      />
      <h4>
        <span>{{ month + 1 }}月</span> <span>{{ year }}年</span>
      </h4>
       <-- 切换至下月-->
      <img
        class="lastMonth"
        src="../assets/images/last.png"
        @click="lastMonth('n')"  //传入‘n'表示没有默认选中
      />
</div>

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;
    };

加载全部内容

相关教程
猜你喜欢
用户评论