因为项目中有个设置考勤的地方用到日历交互,需要点击设置工作日,并且可以跨月设置,就手写了一个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);
}