一个css+jq的日历控件

刚毕业，闲着的时候做了一个日历控件，用css和jquery实现基本的日历功能，包括年份和月份的翻页，日期的选择，根据输入框的初始内容来初始化控件，日期改变之后，也会更新该输入框的内容。

首先是css代码：

@charset "utf-8";
/* CSS Document */
.x-date{
	text-align:center;
}
.date-body{
	display:none;
	width:210px;
	height:260px;
	background-color:#B4D2AE;
	margin-top:5px;
	border-radius:5px;
	z-index:999;
	position:absolute;
}
.date-body .date-year,.date-body .date-day{
	width:210px;
	height:30px;
	font:18px;
	color:#400000;
	border-bottom:1px solid #c0c0c0;
}
.date-body .date-year span{
	display:inline-block;	
	width:50%;
	height:100%;
	line-height:30px;
	float:left;
}
.date-body .date-year span samp{
	display:inline-block;
	width:30px;
	text-align:right;
}
.date-body .date-year{
	position:relative;
	line-height: 30px;
    color: #4C4B79;
    font-family: monospace;
    font-size: 15px;
}
.date-body .date-year .year{
	text-align:right;
}
.date-body .date-year .month{
	text-align:left;
}
.date-ul{
	list-style:none;
	margin:0;
	padding:0;
}
.date-body .date-year .icon{
	display:inline-block;
	position:absolute;
	width:0;
	height:0;
	border:8px solid transparent;
	cursor:pointer;
}
.date-body .date-year .pre-year{
	top:8px;
	left:0px;
	border-right-color:#333;
}
.date-body .date-year .pre-month{
	top:8px;
	left:15px;
	border-right-color:#333;
}
.date-body .date-year .next-year{
	top:8px;
	right:0;
	border-left-color:#333;
}
.date-body .date-year .next-month{
	top:8px;
	right:15px;
	border-left-color:#333;
}
.date-body .date-year .pre-year:hover,.date-body .date-year .pre-month:hover{
	border-right-color:#c0c0c0;
}
.date-body .date-year .next-year:hover,.date-body .date-year .next-month:hover{
	border-left-color:#c0c0c0;
}
.date-date{
	border-bottom:1px solid #c0c0c0;
}
.date-body .date-day ul li,.date-body .date-date ul li{
	list-style:none;
	display:inline-block;
	width:20px;
	height: 18px;
	float:left;
	margin:0;
	padding:6px 5px;
	color:#8C8C0D;
	text-align:center;
	border-radius:50%;
}
.date-ul li a{
	text-decoration:none;
	color:#FF9933;
}
.date-ul .date-li:hover {
	background:#CCCC00;
}
.date-active{
	background:#CCCC00;
}
.date-body .active-date{
	text-align: center;
    line-height: 30px;
    color: #EA6E6E;
}
.date-body .active-date span:nth-child(1){
	display:inline-block;
	width:32px;
}
.date-body .active-date span:nth-child(2),.date-body .active-date span:nth-child(3){
	display:inline-block;
	width:16px;
}
	

然后是js代码：

$(function(){
	$("body").delegate(".date-ul li","click",function(e){
		if($(this).children().length>0){	
			$(".date-ul .date-active").removeClass("date-active");
			$(this).addClass("date-active");	
			$(".date-body .active-date span:eq(2)").text($(this).children(":first").text());
			$("input.x-date").val($(".date-body .active-date span:eq(0)").text()+"/"+$(".date-body .active-date span:eq(1)").text()+"/"+$(".date-body .active-date span:eq(2)").text());
			$(".date-body").fadeOut();
		}
	})
	
	$("body").delegate(".date-body .date-year .pre-year","click",function(){
		var year = ~~$(".date-body .date-year .year samp").text();
		$(".date-body .date-year .year samp").text(year-1);
		$(".date-body .active-date span:eq(0)").text(year-1);
		initCurrMonth();
	})
	$("body").delegate(".date-body .date-year .next-year","click",function(){
		var year = ~~$(".date-body .date-year .year samp").text();
		$(".date-body .date-year .year samp").text(year+1);
		$(".date-body .active-date span:eq(0)").text(year+1);
		initCurrMonth();
	})
	$("body").delegate(".date-body .date-year .pre-month","click",function(){
		var month = ~~$(".date-body .date-year .month samp").text();
		var year = ~~$(".date-body .date-year .year samp").text();
		if(month==1){
			$(".date-body .date-year .month samp").text(12);	
			$(".date-body .date-year .year samp").text(year-1);
			$(".date-body .active-date span:eq(0)").text(year-1);
			$(".date-body .active-date span:eq(1)").text(12);
		}else{
			$(".date-body .date-year .month samp").text(month-1);
			$(".date-body .active-date span:eq(1)").text(month-1);
		}
		initCurrMonth();
	})
	$("body").delegate(".date-body .date-year .next-month","click",function(){
														  debugger
		var month = ~~$(".date-body .date-year .month samp").text();
		var year = ~~$(".date-body .date-year .year samp").text();
		if(month==12){
			$(".date-body .date-year .month samp").text(1);	
			$(".date-body .date-year .year samp").text(year+1);
			$(".date-body .active-date span:eq(1)").text(1);
			$(".date-body .active-date span:eq(0)").text(year+1);
		}else{
			$(".date-body .date-year .month samp").text(month+1);
			$(".date-body .active-date span:eq(1)").text(month+1);
		}
		initCurrMonth();
	})
	$("input.x-date").click(function(e){
		$(".date-body").fadeIn();		
		e.stopPropagation();						 
	})
	$(document).click(function(e){
		debugger
		if($(e.target).parents(".date-body").length==0){
			$(".date-body").fadeOut();
		}
	})
	initDateFrame();
	initDate();
	initCurrMonth();
})
//初始化日历的基本框架
function initDateFrame(){
	var dateFrame="";
	dateFrame += "
    
    

     
     "
	dateFrame += "
     
     

      
      "
	dateFrame += "
      
      
"
	dateFrame += "
      
      
"
	dateFrame += "
      
      年"
	dateFrame += "
      
      月"
	dateFrame += "
      
      "
	dateFrame += "
      
      
"
	dateFrame += "
      
      

     
     
"
	dateFrame += "
     
     

      
      
日
一
二
三
四
五
六
     
     
"
	dateFrame += "
     
     
"
	dateFrame += "
     
     

      
      -
      
      -
      
      
     
     
    
    
";
	$("input.x-date").after(dateFrame);
	//$("input.x-date").attr("disabled","disabled");
	var top = $("input.x-date").offset().top+$("input.x-date").height();
	var left = $("input.x-date").offset().left;
	//alert(top+":"+left);
	$(".date-body").css({"top":top,"left":left});
}

//根据输入框中的日期初始化控件
function initDate(){
	var inputStr = $("input.x-date").val();
	var resultStr = new Date(inputStr);
	//debugger
	if("Invalid Date" != resultStr){
		$(".date-year .year samp").text(resultStr.getFullYear());
		$(".date-year .month samp").text(resultStr.getMonth()+1);
		$(".date-year input[name=currDay]").val(resultStr.getDate());
	}
}

//根据年月初始化日历的数据
function initCurrMonth(){
	var year = ~~$(".year samp").text()||new Date().getFullYear();	
	var month = ~~$(".month samp").text()||new Date().getMonth()+1;	
	var today = ~~$(".date-year input[name=currDay]").val()||new Date().getDate();
	var dayCount = new Date(year,month,0).getDate();
	var week = new Date(year,month-1,1).getDay();
	$(".year samp").text(year);
	$(".month samp").text(month);
	$(".date-body .date-date").empty();
	var circleDay = 1;
	var html = "";
	for(var i=0;circleDay<=dayCount;i++){
		html += "
    
    

     
     ";
		for(var j=1; j<=7; j++){
			if(j>week && circleDay<=dayCount){
				if(circleDay==today){
					html += "
     
     
"+circleDay+"
";
				}else{
					html += "
     
     
"+circleDay+"
";
				}
				circleDay++;
			}else{
				html += "
     
     
";
			}
		}
		week=0;
		html += "
    
    
";
	}
	$(".date-body").css("height",(i+3)*30+4+"px");
	$(".date-body .date-date").css("height",i*30+"px");
	$(".date-body .date-date").append(html);
	
	$(".date-body .active-date span:eq(0)").text(year);
	$(".date-body .active-date span:eq(1)").text(month);
	$(".date-body .active-date span:eq(2)").text(today);
}

使用此控件只需引入上面js、css文件和jquery文件以及

<input type="text" class="x-date"/>一行代码即可。

效果图：