自己用js寫的日歷（在考勤中使用，顯示員工的日期的考勤情況）

1、HTML部分

<div id="AttendanceDataDetailDiv">
<div class="A_close">
<div id="AttendanceDataLevelTitle">考勤明細</div>
<a href="javascript:void(0)" class="aAX" id="PowerA"> X</a>
</div>

<div class="conn">
<div id="CalendarMonthDiv">
<span></span>月
</div>
<table id="CalendarTab" cellspacing="0" border="1">
<thead>
<tr>
<td>周日</td>
<td>周一</td>
<td>周二</td>
<td>周三</td>
<td>周四</td>
<td>周五</td>
<td>周六</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>

 

2、ＪＳ部分

function show(personnelId) {
$("#AttendanceDataDetailDiv").show();//顯示日歷
$("#AttendanceDataDetailDiv").createDialogFun();
var year = $("#YearSelect").val();//年
var month = $("#MonthSelect").val();//月
showDate(year, month);//加載日歷
//根據員工的編號查詢員工在當期月份的考勤信息放在日歷上
ShowAttendanceDateFun(personnelId);
}

var NumDay = "", //一個月有多少天
Week = "", //這個月第一天是星期幾
ldate = "", //日期行數
iHtmlNow = ""; //日歷結構

//顯示日歷
function showDate(year, month) {
//獲得當前月的第一天是星期一
getlWeek(year, month);

creatHtml();//創建HTML結構


}

//創建日期行 l:行
function creatTr(l) {
$("#CalendarTab tbody").empty();
var lstrTd = ""; //行的DOM結構
for (var i = 0; i < l; i++) {
lstrTd += "<tr style='height:90px;'><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
}
$("#CalendarTab tbody").append(lstrTd);

insertdate(Week);
}

//獲得當前月的第一天是星期一
function getlWeek(nowYear, nowMonth) {
$("#CalendarMonthDiv span").html("");
var date = nowMonth + "/" + "1/" + nowYear; //此處也可以寫成 17/07/2014 一樣識別 
var day = new Date(Date.parse(date)); //需要正則轉換的則 此處為 ： var day = new Date(Date.parse(date.replace(/-/g, '/'))); 
Week = day.getDay();//獲取星期
var monthArray = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
$("#CalendarMonthDiv span").html(monthArray[nowMonth - 1]);
getTdDay(nowMonth, nowYear);//根據大小月份取得天數
}


////根據大小月份取得天數
//function getTdDay(m1, y1) {
// NumDay = new Date(y1, m1, 0).getDate();
//}
//根據大小月份取得天數
function getTdDay(m1, y1) {
if (m1 == 1 || m1 == 3 || m1 == 5 || m1 == 7 || m1 == 8 || m1 == 10 || m1 == 12) {
NumDay = 31;
} else if (m1 == 4 || m1 == 6 || m1 == 9 || m1 == 11) {
NumDay = 30;
} else if (m1 == 2 && isRunYear(y1)) {
NumDay = 29;
} else if (m1 == 2) {
NumDay = 28;
}
}

//根據傳入的年份參數，判斷是否是潤年，即能夠被4整除，但不能被100整除，同時滿足時；或者能被400整除；
function isRunYear(y) {
if (y % 4 == 0 && y % 100 != 0) {
return true;
} else if (y % 400 == 0) {
return true;
} else {
return false;
}
}

//創建HMTL結構
function creatHtml() {
//根據當前月份的一號是星期幾，來生成有幾行存放所有日期
if (Week >= 5) {
ldate = 6;
} else {
ldate = 5;
}
creatTr(ldate);

}

//將日期插入到對應的TD當中 d:當前月的第一天是星期幾
function insertdate(d) {
//$("#CalendarTab tbody td").add($(".nextDate table tbody td")).css({ "background-color": "", "color": "" }).empty();
//插入到左邊
for (var i = 0; i < NumDay; i++) {
$("#CalendarTab tbody td").eq(i + d).html(i + 1);
$("#CalendarTab tbody td").eq(i + d).append($("<div style='background-color:white;'>"));
}
}



//根據員工的編號查詢員工在當期月份的考勤信息放在日歷上
function ShowAttendanceDateFun(personnelId) {
$.ajax({
type: "POST",
contentType: "application/json",
data: "{personnelID:'" + personnelId + "',year:" + $("#YearSelect").val() + ",month:" + $("#MonthSelect").val() + "}",
dataType: "json",
url: "/AttendanceDataManager/GetAttendanceById",
success: function (r) {
if (r != null && r.Data != null) {
for (var i = 0; i < r.Data.length; i++) {
var date = dayFormatter(r.Data[i].AttendanceDay);
$("#CalendarTab tbody td").each(function () {
if ($(this).text() == date) {
$(this).find("div").css("width", "97px");
var content = "";
if (r.Data[i].AttendanceType == "正常") {
content = r.Data[i].AttendanceType + "<br/>" + "打卡:" + (r.Data[i].OnDutyTime == null ? "" : r.Data[i].OnDutyTime) + "-" + (r.Data[i].OffDutyTime == null ? "" : r.Data[i].OffDutyTime);
} else if (r.Data[i].AttendanceType == "遲到") {
$(this).css("background-color", "#FFE5E6");
content = r.Data[i].AttendanceType + ":" + r.Data[i].LaterMinutes + "分<br/>" + "打卡:" + (r.Data[i].OnDutyTime == null ? "" : r.Data[i].OnDutyTime) + "-" + (r.Data[i].OffDutyTime == null ? "" : r.Data[i].OffDutyTime);
} else if (r.Data[i].AttendanceType == "早退") {
$(this).css("background-color", "#E1EEC2");
content = r.Data[i].AttendanceType + ":" + r.Data[i].EarlyMinutes + "分<br/>" + "打卡:" + (r.Data[i].OnDutyTime == null ? "" : r.Data[i].OnDutyTime) + "-" + (r.Data[i].OffDutyTime == null ? "" : r.Data[i].OffDutyTime);
} else if (r.Data[i].AttendanceType == "遲到早退") {
$(this).css("background-color", "red");
content ="遲到:" + r.Data[i].LaterMinutes +"分<br/>早退:"+ r.Data[i].EarlyMinutes + "分<br/>" + "打卡:" + (r.Data[i].OnDutyTime) + "-" + (r.Data[i].OffDutyTime == null ? "" : r.Data[i].OffDutyTime);
} else if (r.Data[i].AttendanceType == "") {
//content = r.Data[i].AttendanceType + "<br/>" + "打卡：" + (r.Data[i].OnDutyTime == null ? "" : r.Data[i].OnDutyTime) + "-" + (r.Data[i].OffDutyTime == null ? "" : r.Data[i].OffDutyTime);
content = "";
}
else {
$(this).css("background-color", "#FBCA4A");
content = r.Data[i].AttendanceType + "<br/>" + (r.Data[i].AttendanceType=='未打下班卡'?("打卡:"+r.Data[i].OnDutyTime):"");
}
$(this).find("div").html(content);
}
});
}
}
}
});
}