自己用js写的日历（在考勤中使用，显示员工的日期的考勤情况）

1、HTML部分

 1 <div id="AttendanceDataDetailDiv">
 2 <div class="A_close">
 3 <div id="AttendanceDataLevelTitle">考勤明细div>
 4 <a href="javascript:void(0)" class="aAX" id="PowerA"> Xa>
 5 div>
 6 
 7 <div class="conn">
 8 <div id="CalendarMonthDiv">
 9 <span>span>月
10 div>
11 <table id="CalendarTab" cellspacing="0" border="1">
12 <thead>
13 <tr>
14 <td>周日td>
15 <td>周一td>
16 <td>周二td>
17 <td>周三td>
18 <td>周四td>
19 <td>周五td>
20 <td>周六td>
21 tr>
22 thead>
23 <tbody>tbody>
24 table>
25 div>
26 div>

 

2、ＪＳ部分

  1 function show(personnelId) {
  2 $("#AttendanceDataDetailDiv").show();//显示日历
  3 $("#AttendanceDataDetailDiv").createDialogFun();
  4 var year = $("#YearSelect").val();//年
  5 var month = $("#MonthSelect").val();//月
  6 showDate(year, month);//加载日历
  7 //根据员工的编号查询员工在当期月份的考勤信息放在日历上
  8 ShowAttendanceDateFun(personnelId);
  9 }
 10 
 11 var NumDay = "", //一个月有多少天
 12 Week = "", //这个月第一天是星期几
 13 ldate = "", //日期行数
 14 iHtmlNow = ""; //日历结构
 15 
 16 //显示日历
 17 function showDate(year, month) {
 18 //获得当前月的第一天是星期一
 19 getlWeek(year, month);
 20 
 21 creatHtml();//创建HTML结构
 22 
 23 
 24 }
 25 
 26 //创建日期行 l:行
 27 function creatTr(l) {
 28 $("#CalendarTab tbody").empty();
 29 var lstrTd = ""; //行的DOM结构
 30 for (var i = 0; i < l; i++) {
 31 lstrTd += "";
 32 }
 33 $("#CalendarTab tbody").append(lstrTd);
 34 
 35 insertdate(Week);
 36 }
 37 
 38 //获得当前月的第一天是星期一
 39 function getlWeek(nowYear, nowMonth) {
 40 $("#CalendarMonthDiv span").html("");
 41 var date = nowMonth + "/" + "1/" + nowYear; //此处也可以写成 17/07/2014 一样识别 
 42 var day = new Date(Date.parse(date)); //需要正则转换的则 此处为 ： var day = new Date(Date.parse(date.replace(/-/g, '/'))); 
 43 Week = day.getDay();//获取星期
 44 var monthArray = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
 45 $("#CalendarMonthDiv span").html(monthArray[nowMonth - 1]);
 46 getTdDay(nowMonth, nowYear);//根据大小月份取得天数
 47 }
 48 
 49 
 50 ////根据大小月份取得天数
 51 //function getTdDay(m1, y1) {
 52 // NumDay = new Date(y1, m1, 0).getDate();
 53 //}
 54 //根据大小月份取得天数
 55 function getTdDay(m1, y1) {
 56 if (m1 == 1 || m1 == 3 || m1 == 5 || m1 == 7 || m1 == 8 || m1 == 10 || m1 == 12) {
 57 NumDay = 31;
 58 } else if (m1 == 4 || m1 == 6 || m1 == 9 || m1 == 11) {
 59 NumDay = 30;
 60 } else if (m1 == 2 && isRunYear(y1)) {
 61 NumDay = 29;
 62 } else if (m1 == 2) {
 63 NumDay = 28;
 64 }
 65 }
 66 
 67 //根据传入的年份参数，判断是否是润年，即能够被4整除，但不能被100整除，同时满足时；或者能被400整除；
 68 function isRunYear(y) {
 69 if (y % 4 == 0 && y % 100 != 0) {
 70 return true;
 71 } else if (y % 400 == 0) {
 72 return true;
 73 } else {
 74 return false;
 75 }
 76 }
 77 
 78 //创建HMTL结构
 79 function creatHtml() {
 80 //根据当前月份的一号是星期几，来生成有几行存放所有日期
 81 if (Week >= 5) {
 82 ldate = 6;
 83 } else {
 84 ldate = 5;
 85 }
 86 creatTr(ldate);
 87 
 88 }
 89 
 90 //将日期插入到对应的TD当中 d:当前月的第一天是星期几
 91 function insertdate(d) {
 92 //$("#CalendarTab tbody td").add($(".nextDate table tbody td")).css({ "background-color": "", "color": "" }).empty();
 93 //插入到左边
 94 for (var i = 0; i < NumDay; i++) {
 95 $("#CalendarTab tbody td").eq(i + d).html(i + 1);
 96 $("#CalendarTab tbody td").eq(i + d).append($("
"));
 97 }
 98 }
 99 
100 
101 
102 //根据员工的编号查询员工在当期月份的考勤信息放在日历上
103 function ShowAttendanceDateFun(personnelId) {
104 $.ajax({
105 type: "POST",
106 contentType: "application/json",
107 data: "{personnelID:'" + personnelId + "',year:" + $("#YearSelect").val() + ",month:" + $("#MonthSelect").val() + "}",
108 dataType: "json",
109 url: "/AttendanceDataManager/GetAttendanceById",
110 success: function (r) {
111 if (r != null && r.Data != null) {
112 for (var i = 0; i < r.Data.length; i++) {
113 var date = dayFormatter(r.Data[i].AttendanceDay);
114 $("#CalendarTab tbody td").each(function () {
115 if ($(this).text() == date) {
116 $(this).find("div").css("width", "97px");
117 var content = "";
118 if (r.Data[i].AttendanceType == "正常") {
119 content = r.Data[i].AttendanceType + "
" + "打卡:" + (r.Data[i].OnDutyTime == null ? "" : r.Data[i].OnDutyTime) + "-" + (r.Data[i].OffDutyTime == null ? "" : r.Data[i].OffDutyTime);
120 } else if (r.Data[i].AttendanceType == "迟到") {
121 $(this).css("background-color", "#FFE5E6");
122 content = r.Data[i].AttendanceType + ":" + r.Data[i].LaterMinutes + "分
" + "打卡:" + (r.Data[i].OnDutyTime == null ? "" : r.Data[i].OnDutyTime) + "-" + (r.Data[i].OffDutyTime == null ? "" : r.Data[i].OffDutyTime);
123 } else if (r.Data[i].AttendanceType == "早退") {
124 $(this).css("background-color", "#E1EEC2");
125 content = r.Data[i].AttendanceType + ":" + r.Data[i].EarlyMinutes + "分
" + "打卡:" + (r.Data[i].OnDutyTime == null ? "" : r.Data[i].OnDutyTime) + "-" + (r.Data[i].OffDutyTime == null ? "" : r.Data[i].OffDutyTime);
126 } else if (r.Data[i].AttendanceType == "迟到早退") {
127 $(this).css("background-color", "red");
128 content ="迟到:" + r.Data[i].LaterMinutes +"分
早退:"+ r.Data[i].EarlyMinutes + "分
" + "打卡:" + (r.Data[i].OnDutyTime) + "-" + (r.Data[i].OffDutyTime == null ? "" : r.Data[i].OffDutyTime);
129 } else if (r.Data[i].AttendanceType == "") {
130 //content = r.Data[i].AttendanceType + "
" + "打卡：" + (r.Data[i].OnDutyTime == null ? "" : r.Data[i].OnDutyTime) + "-" + (r.Data[i].OffDutyTime == null ? "" : r.Data[i].OffDutyTime);
131 content = "";
132 }
133 else {
134 $(this).css("background-color", "#FBCA4A");
135 content = r.Data[i].AttendanceType + "
" + (r.Data[i].AttendanceType=='未打下班卡'?("打卡:"+r.Data[i].OnDutyTime):"");
136 }
137 $(this).find("div").html(content);
138 }
139 });
140 }
141 }
142 }
143 });
144 }

 

转载于:https://www.cnblogs.com/DoubleLove/p/4329060.html