因为项目中有个设置考勤的地方用到日历交互,需要点击设置工作日,并且可以跨月设置,就手写了一个js控件,效果基本如图所示,可以上下翻月,点击设置变色后翻页可记住位置。
基本思路:
1,每画一个月生成对应个数的隐藏<input>域,每个带有点击事件,点击后变色并赋值
2,翻页后将本页数据ajax到后台并再带到下个月或上个月,点击过的天数会对应变色
3,再次翻页后用本月数据ajax更新往月数据,依次类推
代码如下,js写的不多,可能略粗糙:
/*-----------------------------------------------绘制日历-------------------------------------------------------- */ $(function() { var iNow=0; run(0,'${dailyTransactionList}'); //上个月 $(".a1").click(function(){ //新建考勤时dailyTransactionList为前页暂存每日详情list //修改考勤时dailyTransactionList为本考勤对应每日详情list //暂存本页数据 $.ajax({ type: 'post', data :$("#attendanceAddOrUpdateForm").serialize()+"&lastPageDailyTransactionsList="+baseDailyTranctionList, url: "${ctx}/manage/attendance/saveCurrentPageDailyTransaction", dataType:"json", success:function (data) { //非空白数据更新baselist if(data!=''){ baseDailyTranctionList = JSON.stringify(data); } iNow--; run(iNow,baseDailyTranctionList); }, error: function (data) { layer.msg("暂存本页数据出错"); } }) }); //下个月 $(".a2").click(function(){ //新建考勤时dailyTransactionList为前页暂存每日详情list //修改考勤时dailyTransactionList为本考勤对应每日详情list //暂存本页数据 $.ajax({ type: 'post', async:false, data :$("#attendanceAddOrUpdateForm").serialize()+"&lastPageDailyTransactionsList="+baseDailyTranctionList, url: "${ctx}/manage/attendance/saveCurrentPageDailyTransaction", dataType:"json", success:function (data) { //非空白数据更新baselist if(data!=''){ baseDailyTranctionList = JSON.stringify(data); } iNow++; run(iNow,baseDailyTranctionList); }, error: function (data) { layer.msg("暂存本页数据出错"); } }) }) });
/*-----------------------------------------------日历-------------------------------------------------------- */ //获取月份差 function getIntervalMonth(startDate,endDate){ var startMonth = startDate.getMonth(); var endMonth = endDate.getMonth(); var intervalMonth = (startDate.getFullYear()*12+startMonth) - (endDate.getFullYear()*12+endMonth); return intervalMonth; } //获取月份日期前缀方法 function getMonthDatePrefix(month,year){ var monthDatePrefix; if(month<9){ monthDatePrefix = year+"0"+(month+1); }else{ monthDatePrefix = year+""+(month+1); } return monthDatePrefix; } //日历绘制方法 function run(n,data) { //将baselist带给保存方法 $('#saveAttendanceInput').val(data); var oDate = new Date(); //定义时间 oDate.setMonth(oDate.getMonth()+n);//设置月份 //本月上月下月年月信息 var year = oDate.getFullYear(); //年 var month = oDate.getMonth(); //月(月份从0开始) var today = oDate.getDate(); //日 oDate.setMonth(oDate.getMonth()-1); //本月上月下月日期年月前缀 var datePrefix = getDatePrefix(month,year); var monthDatePrefix = getMonthDatePrefix(month,year); //计算本月有多少天 var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; //计算上月有多少天 var lastMonthAllDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][lastMonth]; //计算下月有多少天 var nextMonthAllDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][lastMonth]; //判断闰年 if(month == 1) { if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { allDay = 29; } } //判断本月第一天是星期几 oDate.setMonth(oDate.getMonth()-1); oDate.setDate(1); //时间调整到本月第一天 var week = oDate.getDay(); //读取本月第一天是星期几 返回值是 0(周日) 到 6(周六) 之间的一个整数 //默认周日在最左侧,为显示方便,将周六周日移动到最右侧 if(week==0){ week=6; }else{ week=week-1; } //console.log(week); $(".dateList").empty();//每次清空 //插入日历详情 $(".calendarBookDetail").append("<input type='hidden' name='calendarBook.calendarDate' value='"+monthDatePrefix+"'>"); //插入上个月日期 for(var i = 0; i < week; i++) { if('${rulesType}' !="1"&&'${rulesType}' !="2"){ $(".dateList").append("<li><input type='hidden' name='dailyTransactionList["+i+"].day' value='"+getDateByIndex(lastMonthAllDay-week+i+1,lastDatePrefix)+"'><input type='hidden' name='dailyTransactionList["+i+"].dayOfWeek' value='"+getWeekByIndex((lastMonthAllDay-week+1+i),lastDatePrefix)+"'><input type='hidden' name='dailyTransactionList["+i+"].transationType' value='"+1+"'><input type='hidden' name='dailyTransactionList["+i+"].attendanceType' value='${attendanceRulesVo.attendanceRules.rulesType}'>" + (lastMonthAllDay-week+1+i) + "</li>"); }else{ $(".dateList").append("<li><input type='hidden' name='dailyTransactionList["+i+"].day' value='"+getDateByIndex(lastMonthAllDay-week+i+1,lastDatePrefix)+"'><input type='hidden' name='dailyTransactionList["+i+"].dayOfWeek' value='"+getWeekByIndex((lastMonthAllDay-week+1+i),lastDatePrefix)+"'><input type='hidden' name='dailyTransactionList["+i+"].transationType' value='"+1+"'><input type='hidden' name='dailyTransactionList["+i+"].attendanceType' value='${rulesType}'>" + (lastMonthAllDay-week+1+i) + "</li>"); } } //插入本月日期 for(var i = 1; i <= allDay; i++) { //添加当月每天的li if('${rulesType}' !="1"&&'${rulesType}' !="2"){ $(".dateList").append("<li><input type='hidden' name='dailyTransactionList["+(week+i-1)+"].day' value='"+getDateByIndex(i,datePrefix)+"'><input type='hidden' name='dailyTransactionList["+(week+i-1)+"].dayOfWeek' value='"+getWeekByIndex(i,datePrefix)+"'><input type='hidden' name='dailyTransactionList["+(week+i-1)+"].transationType' value='"+1+"'><input type='hidden' name='dailyTransactionList["+(week+i-1)+"].attendanceType' value='${attendanceRulesVo.attendanceRules.rulesType}'>" + i + "</li>"); }else{ $(".dateList").append("<li><input type='hidden' name='dailyTransactionList["+(week+i-1)+"].day' value='"+getDateByIndex(i,datePrefix)+"'><input type='hidden' name='dailyTransactionList["+(week+i-1)+"].dayOfWeek' value='"+getWeekByIndex(i,datePrefix)+"'><input type='hidden' name='dailyTransactionList["+(week+i-1)+"].transationType' value='"+1+"'><input type='hidden' name='dailyTransactionList["+(week+i-1)+"].attendanceType' value='${rulesType}'>" + i + "</li>"); } } //插入下个月日期 var left = (allDay+week)%7; if(left!=0){ left = 7-left; } for(var i = 1; i <= left; i++) { if('${rulesType}' !="1"&&'${rulesType}' !="2"){ $(".dateList").append("<li><input type='hidden' name='dailyTransactionList["+(allDay+week+i-1)+"].day' value='"+getDateByIndex(i,nextDatePrefix)+"'><input type='hidden' name='dailyTransactionList["+(allDay+week+i-1)+"].dayOfWeek' value='"+getWeekByIndex(i,nextDatePrefix)+"'><input type='hidden' name='dailyTransactionList["+(allDay+week+i-1)+"].transationType' value='"+1+"'><input type='hidden' name='dailyTransactionList["+(allDay+week+i-1)+"].attendanceType' value='${attendanceRulesVo.attendanceRules.rulesType}'>" + i + "</li>"); }else { $(".dateList").append("<li><input type='hidden' name='dailyTransactionList["+(allDay+week+i-1)+"].day' value='"+getDateByIndex(i,nextDatePrefix)+"'><input type='hidden' name='dailyTransactionList["+(allDay+week+i-1)+"].dayOfWeek' value='"+getWeekByIndex(i,nextDatePrefix)+"'><input type='hidden' name='dailyTransactionList["+(allDay+week+i-1)+"].transationType' value='"+1+"'><input type='hidden' name='dailyTransactionList["+(allDay+week+i-1)+"].attendanceType' value='${rulesType}'>" + i + "</li>"); } } //标记颜色===================== $(".dateList li").each(function(i, elm){ //console.log(index,elm); var curentDate = $(this).children().eq(0).val(); var monthCount = curentDate.split("-")[1]; /* if (n==0) { //非本月且非节假日 if((monthCount-month-1)!=0&&i%7!=5&&i%7!=6){ $(this).addClass('ccc') }else if(i%7==5 || i%7==6 ){ $(this).addClass('sun') } }else if(n<0){ $(this).addClass('ccc') }else if(i%7==5 || i%7==6 ){ $(this).addClass('sun') } */ //非本月背景色灰色 if((monthCount-month-1)!=0&&i%7!=5&&i%7!=6){ $(this).addClass('ccc'); //节假日背景色灰色字体红色 }else if((monthCount-month-1)!=0&&i%7==5){ $(this).addClass('sunccc'); }else if((monthCount-month-1)!=0&&i%7==6){ $(this).addClass('sunccc'); }else if(i%7==5 || i%7==6 ){ $(this).addClass('sun') } }); //定义标题日期 $("#calendar h4").text(year + "年" + (month + 1) + "月"); //为每天添加点击事件 var dayList=$(".dateList li"); for(i=0;i<dayList.length;i++) { dayList[i].onclick = function () { if($(this).children().eq(2).val()==1){ //点击变色 this.style="background-color:#FF8000"; //设置类型为工作日 $(this).children().eq(2).val(2); }else{ //变色 $(this).removeAttr("style"); //设置类型为工作日 $(this).children().eq(2).val(1); } } } //将传入的每日详情赋值 for(i=0;i<dayList.length;i++) { var currentDate = dayList[i].children[0].value; /* //获得数据库中所有每日详情 var dailyTransactionList = '${dailyTransactionList}'; var arrayDate = new Array(); <c:forEach items="${dailyTransactionList}" var="list"> arrayDate.push('${list.day}'); </c:forEach> var arrayType = new Array(); <c:forEach items="${dailyTransactionList}" var="list"> arrayType.push('${list.transationType}'); </c:forEach> */ if(data!=''){ //将data字符串转为数组data2 var data2 = eval(data); for(var j in data2){ if(new Date(data2[j].day).toLocaleDateString()==new Date(currentDate).toLocaleDateString()){ dayList[i].children[2].value=data2[j].transationType; if(data2[j].transationType==2){ dayList[i].setAttribute("style","background-color:#FF8000"); } } } } } };