一个纯手写日历控件(重复造轮子)

本文介绍了一种纯JavaScript实现的日历控件,用于项目中的考勤设置,支持点击设置工作日并跨月记忆。通过生成隐藏input元素绑定事件,实现日期点击变色,翻页时利用AJAX保持选中状态。代码虽然简单,但可能不够精炼。
摘要由CSDN通过智能技术生成

因为项目中有个设置考勤的地方用到日历交互,需要点击设置工作日,并且可以跨月设置,就手写了一个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);
        }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值