码迷，mamicode.com
首页 > Web开发 > 详细

jquery日历插件(2)

时间：2015-03-02 13:16:38      阅读：238      评论：0      收藏：0      [点我收藏+]

标签：

链接jQuery日历插件编写

js：jquery.calendar-1.0.0.js名称请不要更改

改进：

1、改进了调用方式，使用更加方便。

2、支持导入皮肤库，具体导入方法可以参考源码中的Calendar.loadCSS()方法。

如果要自定义皮肤，可以参考源码文件方式，在skin包中新增一个皮肤文件夹，然后参考其他皮肤文件夹中的style.css修改，这个如果是自定义皮肤调用的话就是：

jQuery对象.showCalendar({skin:'自定义皮肤文件夹名称'});

js文件请放到与skin目录同级处。

文件结构：

技术分享

-----jquery.calendar-1.0.0.js  (核心js文件)

-----skin       (皮肤包)       

----------calendar.css (基础样式)      

----------default  (默认日历皮肤)

--------------------style.css

----------red (大红皮肤)

--------------------style.css

----------blue(深蓝皮肤)

--------------------style.css

3、支持日期格式转换,请遵循y(年),M(月),d(日),H(小时),m(分钟),s(秒)，类似yyyy-MM-dd HH:mm:ss。

后续版本将实现的功能：

1、支持时分秒的选择。

2、提高代码质量，减少代码的冗余，尽量提供科学的外部接口。

3、支持min,max两个参数，即设置日期选择的最大值与最小值。

4、支持农历的切换。

5、支持节日的显示等等。

调用demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
	*{margin:0;padding:0;font-family:微软雅黑}
	body{background:#EFEFEF;}
	input{margin-top:20px;margin-left:20px;border:1px solid #EFEFEF;
	line-height:25px;font-size:10pt;width:200px;height:30px; border-color:#535353}
</style>
<script type="text/javascript" src="HTML/jQuery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="HTML/jQuery/jquery.calendar-1.0.0.js"></script>
</head>

<body>
	开始日期:<input type="text" readonly="readonly" class="startTime"/><br/>
	结束日期:<input type="text" readonly="readonly" class="endTime" /><br/>
	<!--<input type="text" readonly="readonly" class="testTime" />-->
</body>
<script type="text/javascript">
	$(".startTime").showCalendar();
	$(".endTime").showCalendar({skin:'red',format:'yyyy-MM-dd HH:mm'});
	//$(".testTime").showCalendar({skin:'blue'});
</script>
</html>
第一个为默认皮肤，显示效果为：

技术分享

第二个为大红皮肤red文件夹下，且自定义了format:

技术分享
默认参数：

var defaultOptions = {
	//日历格式'yyyy-MM-dd'('yyyy-MM-dd','yyyy年MM月dd日')
	format:'yyyy-MM-dd',
	//高度,默认220px
	height:220,
	//宽度:默认与文本框宽度相同
	width:$(this).innerWidth(),
	//日历框离文本框高度
	marginTop:1,
	//上中下三处的间隔,默认为5像素
	spaceWidth:5,
	//最小值
	min:'',
	//最大值
	max:'',
	//皮肤文件夹名称,默认加载默认皮肤
	skin:'default',
	zIndex:9999
};
具体实现代码：

"use strict";
/**
 * jquery日历插件jqyery.calendar-1.0.0.js
 * @author:xuzengqiang
 * @since :2015-2-4 15:31:39
**/
;(function($){   
	jQuery.fn.extend({
		showCalendar:function(options){			 
			var defaultOptions = {
				//日历格式'yyyy-MM-dd'('yyyy-MM-dd','yyyy年MM月dd日')
				format:'yyyy-MM-dd',
				//高度,默认220px
				height:220,
				//宽度:默认与文本框宽度相同
				width:$(this).innerWidth(),
				//日历框离文本框高度
				marginTop:1,
				//上中下三处的间隔,默认为5像素
				spaceWidth:5,
				//最小值
				min:'',
				//最大值
				max:'',
				//皮肤文件夹名称,默认加载默认皮肤
				skin:'default',
				zIndex:9999
			};
			var settings = jQuery.extend(defaultOptions,options || {}),
				//今天
				today = new Date(),
				//箭头大小
				arrowWidth=6,
				//日历对象
				$calendar,
				//版本
				Version = "1.0.0",
				//日历div层的id和name名称
				CALENDAR = "calendar_box",
				//皮肤文件夹
				SKIN = "skin",
				//基本样式ID
				BASE_ID = "calendar_base",
				//日历对应皮肤<link id=''.../>的id名称
				SKIN_ID = "calendar_skin",
				//皮肤样式名称
				SKIN_NAME = "style.css",
				//基础样式
				BASE_CSS = "calendar.css",
				//js名称
				JS_NAME = "jquery.calendar-"+Version+".js",
				document = window.document;
				
			//当前触发对象,唯一
			window.triggerElement = $(this);
			//行高
			window.lineHeight = parseInt(settings.height-4*settings.spaceWidth)/9;
			
			/**
			 * 提供给外部接口,可直接调用
			**/
			window.DateUtils = {
				//星期列表
				weeks : ['日','一','二','三','四','五','六'],
				//每月的天数
				months : [31,null,31,30,31,30,31,31,30,31,30,31],
				//获取指定星期
				getWeek:function(num){
					return DateUtils.weeks[num];
				},
				//是否是闰年
				isLeapYear:function(year){
					return (year%4==0 && year%100!=0) || (year%400==0);
				},	  
				//指定年份二月的天数
				februaryDays:function(year){
					if(typeof year !== "undefined" && parseInt(year) === year) {
						return DateUtils.isLeapYear(year) ? 29:28;
					}
					return 0;
				},
				//获取指定月份[0,11]的天数
				getMonthDay:function(year,month){
					if(month === 1){
						return DateUtils.februaryDays(year);
					}
					month=(month===-1)?11:month;	
					return DateUtils.months[month];
				}
			};
			
			//对于小于10的数字前+0
			Number.prototype.addZero = function(){
				return this<10?"0"+this:this;
			};
			
			// 对日期格式化
			Date.prototype.format = function(pattern){
				if(typeof pattern === "undefined" || pattern === null) {
					pattern = "yyyy年MM月dd日 HH时mm分ss秒";
				}
				var val = {
					"M+":this.getMonth() + 1, //月份
					"d+":this.getDate(),  //日
					"H+":this.getHours(), //小时
					"m+":this.getMinutes(),   //分钟
					"s+":this.getSeconds()    //秒
				};
				if(/(y+)/.test(pattern)) {
					var year = String(this.getFullYear());
					pattern = pattern.replace(RegExp.$1,year.substr(4-RegExp.$1.length));
				}
				for(var i in val) {
					if(new RegExp("("+i+")").test(pattern)) {
						//如果只匹配一个值,如果该数<10,那么不加0,否则仍然为两位数,否则如果为2位数,<10则补0
						var temp = (RegExp.$1.length === 1)?val[i]:("00"+val[i]).substr(String(val[i]).length);
						pattern = pattern.replace(RegExp.$1,temp);
					}
				}
				return pattern;
			};
			
			//比较两个日期对象的大小,>0:大于,<0:小于,0:等于
			Date.prototype.compareTo = function(){
				var A = this, B = arguments[0];
				if(typeof B !== "undefined" && B instanceof Date) {
					var Astr = this.format("yyyyMMdd"),Bstr = B.format("yyyyMMdd");
					return parseInt(Astr)-parseInt(Bstr);
				}
				return 1;
			};
			
			//string转Date类型(已知日期格式)
			String.prototype.formatDate = function(pattern){
				
			};
			
			var Calendar = {
					initCalendar:function(){
						if($calendar.length > 0) return false;
						//如果没有加载
						$("body").append("<div id="+CALENDAR+" class="+CALENDAR+"></div>");
						$calendar = $("#"+CALENDAR);
						//导入核心html
						$calendar.html(Calendar.innerHTML());
						//事件绑定
						Calendar.bindEvent();
						Calendar.destory();
					},
					//日历核心HTML
					innerHTML:function(){
						var htmlContent = "<div class='cal_head'>"+ <!--头部div层start-->
											  "<div class='year_oper oper_date'>"+
												"<a class='year_sub'><b class='arrow aLeft'/></a>"+
												"<a class='year_add'><b class='arrow aRight'/></a>"+
												"<span class='current_year'></span>"+ 
												<!--位置互换下,考虑到span后面float:right会换行-->
											  "</div>"+
											  "<div class='month_oper oper_date'>"+
												"<a class='month_sub'><b class='arrow aLeft'/></a>"+
												"<a class='month_add'><b class='arrow aRight'/></a>"+
												"<span class='current_month'></span>"+
											  "</div>"+
										  "</div>"+ <!--头部div层end-->
										  "<div class='cal_center'><table cellspacing='0'></table></div>"+
										  "<div class='cal_bottom'>"+ <!--底部div层start-->
											"<a><button class='clear_date'>清空</button></a>"+
											"<a><button class='today_date'>今天</button></a>"+
											"<a><button class='confirm_date'>确定</button></a>"+
										  "</div>";<!--底部div层end-->
						return htmlContent;   
					},
					//初始化样式
					initStyle:function(){
						//日历顶部样式设置
						var $calHead=$calendar.find(".cal_head"),
							$operDate=$calendar.find(".oper_date"),
							$arrow=$calHead.find(".arrow"),
							$center=$calendar.find(".cal_center"),
							$calBottom = $calendar.find(".cal_bottom");
						//初始化日历的宽高
						$calendar.css({"height":settings.height,"width":settings.width});
						
						//顶部高度	
						$calHead.css({"height":lineHeight+2*settings.spaceWidth});
						
						//设置operDate包含边框的实际宽度
						$operDate.css({"margin-top":settings.spaceWidth,"margin-left":settings.spaceWidth});
						$operDate.outerWidth(($calHead.width()-3*settings.spaceWidth)/2);
						$operDate.outerHeight(lineHeight);
						$operDate.find("a").css({"height":$operDate.innerHeight()});
						$operDate.find("span").css({"line-height":$operDate.height()+"px"});
						
						//箭头垂直居中
						$arrow.css({"margin-top":parseInt($operDate.innerHeight())/2-arrowWidth});
						
						//加载中间表格样式
						$center.css({"margin-left":settings.spaceWidth});
						$center.outerWidth($calendar.width()-2*settings.spaceWidth);
						$center.height(lineHeight*7);
						
						//底部样式
						$calBottom.css({"margin-right":settings.spaceWidth});
						$calBottom.find("button")
						          .css({"margin-top":settings.spaceWidth,"margin-left":settings.spaceWidth});
						$calBottom.find("button").outerHeight(lineHeight);
						
						//去除button链接的虚线框
						$("#calendar_box a,#calendar_box button").focus(function(){this.blur()});
					},
					//事件绑定
					bindEvent:function(){
						$calendar.find(".year_add").click(function(){Calendar.yearAdd();});
						$calendar.find(".year_sub").click(function(){Calendar.yearSub();});
						$calendar.find(".month_add").click(function(){Calendar.monthAdd();});
						$calendar.find(".month_sub").click(function(){Calendar.monthSub();});
						$calendar.find(".confirm_date").click(function(){Calendar.confirm();});
						$calendar.find(".clear_date").click(function(){Calendar.clear();});
					},
					//当前日历显示的年份和月份
					date:function(){
						return {
							year:parseInt($calendar.find(".current_year").html()),
							month:parseInt($calendar.find(".current_month").html())
						};
					},
					//年份自增
					yearAdd:function(){
						Calendar.loadCalendarBody(Calendar.date().year+1,Calendar.date().month-1);
					},
					//年份自减
					yearSub:function(){
						Calendar.loadCalendarBody(Calendar.date().year-1,Calendar.date().month-1);
					},
					//月份自增
					monthAdd:function(){
						var year = Calendar.date().year, month = Calendar.date().month;
						if(month==12) {  
							month=1;  
							year=year+1;  
						} else {  
							month=month+1;  
						}  
						Calendar.loadCalendarBody(year,month-1);
					},
					//月份自减
					monthSub:function(){
						var year = Calendar.date().year, month = Calendar.date().month;
						if(month==1) {  
							month=12;  
							year=year-1;  
						} else {  
							month=month-1;  
						}  
						Calendar.loadCalendarBody(year,month-1);
					},
					//日期选择
					dateChoose:function($object){
						var year = Calendar.date().year, month = Calendar.date().month;
						//上一个月
						if($object.hasClass("pre_month_day")) {
							if(month == 1) {
								year = year-1;
								month = 12;
							} else {
								month = (month-1).addZero();
							}
						//当前月	
						} else if($object.hasClass("this_month_day")) {
							month = month.addZero();
						//下一个月
						} else {
							if(month == 12) {
								month = "01";
								year = year + 1;
							} else {
								month = (month+1).addZero();
							}
						}
						var result = new Date(year,month,$object.text()).format(settings.format);
						triggerElement.val(result);
					},
					//初始化日历主体内容
					loadCalendarBody:function(year,month){
						//初始化日期为当前年当前月的1号,获取1号对应的星期   
						var oneWeek=new Date(year,month,1).getDay(),
							$calTable = $calendar.find("table"),
							//这个月天数
							thisMonthDay = DateUtils.getMonthDay(year,month),
							//获取上一个的天数
							preMonthDay = DateUtils.getMonthDay(year,month-1);
							
						//清空日期列表
						$calTable.html("");
						
						$calendar.find(".current_year").text(year+"年");	
						$calendar.find(".current_month").text((month+1)+"月");	
						if(oneWeek == 0) oneWeek = 7;
						
						var start = 1, end = 1;  
						for(var i=0;i<7;i++) {
							var dayHTML = "";
							if(i==0) {
								$calTable.append("<tr class='week_head'><tr>");
							}
							for(var j=1;j<=7;j++) {  
								//设置星期列表
								if(i==0) {   
									$calTable.find(".week_head").append("<td>"+DateUtils.getWeek(j-1)+"</td>"); 
								} else {  
									if((i-1)*7+j<=oneWeek) { //从第二行开始设置值                       
										dayHTML+="<td class='pre_month_day'>"+(preMonthDay-oneWeek+j)+"</td>";
									} else if((i-1)*7+j<=thisMonthDay+oneWeek ){  
										var result=(start++).addZero();  
										dayHTML+="<td class='this_month_day'>"+result+"</td>";
									} else {  
										var result=(end++).addZero();  
										dayHTML +="<td class='next_month_day'>"+result+"</td>"; 
									}  
								}   
							}     
							if(i>0){
								$calTable.append("<tr class='date_td'>"+dayHTML+"</tr>");
							}
						} 
						Calendar.tableStyle();
						$calendar.find(".today_date").click(function(){Calendar.getToday();});
					},
					//表格样式初始化
					tableStyle:function(){
						//表格中单元格的宽度
						var $center = $calendar.find(".cal_center"),
      						$table = $calendar.find("table"),
							tdWidth = parseFloat($center.width())/7;
							
						$table.find("td").css({"width":tdWidth});
						//去除最右侧表格的右边框
						$table.find("td:nth-child(7n)").css({"border-right":0});
						$table.find("td").outerHeight(lineHeight);
						//日历选中
						$table.find("tr[class!=week_head] td").click(function(){Calendar.dateChoose($(this));});
					},
					//重新设置日历位置,当一个页面存在多个日历选择框
					resetLocation:function(){
						var left = triggerElement.offset().left,
							top = triggerElement.offset().top + triggerElement.innerHeight() + settings.marginTop;
						$calendar.css({"left":left,"top":top});
					},
					//确定事件
					confirm:function(){
						Calendar.destory();
					},
					//清空
					clear:function(){
						triggerElement.val("");
						Calendar.destory();
					},
					//关闭日历
					destory:function(){
						$("#"+CALENDAR).css({"opacity":"0","z-index":-1});
					},
					//显示日历
					show:function(){
						$("#"+CALENDAR).css({"opacity":"1","z-index":settings.zIndex});
					},
					//今天
					getToday:function(){
						triggerElement.val(today.format(settings.format));
						Calendar.destory();
					},
					//css文件加载
					loadCSS:function(id,url,callback){
						var head = $("head"),
							css = document.createElement("link");
						css.type = "text/css",
						css.rel = "stylesheet";
						if(typeof id !== "undefined" && typeof id !== null && typeof id !== '') {
							css.id = id;
							if($("head #"+id).length > 0) {
								$("head #"+id).empty().remove();
							}
						}
						if(typeof url !== "string" || url === null || url === '') return false;
						if(css.readyState) {    
							css.onreadystatechange = function(){    
								if(css.readyState === "loaded" || css.readyState === "complete") {    
									css.onreadystatechange = null;    
									if(typeof callback === "undefined" || typeof callback === null) return false;
									callback();    
								}    
							};      
						} else  {    
							css.onload = function(){
								if(typeof callback === "undefined" || typeof callback === null) return false;
								callback();    
							};    
						}  
						css.href = url;
						head.append(css);
					},
					//获取文件路径
					getPath:function(){
						var scripts = document.scripts,
							path = "";
						for(var i=0,maxLen=scripts.length;i<maxLen;i++) {
							var temp = scripts[i].src;
							if(temp.indexOf(JS_NAME) !== -1) {
								path = temp.substr(0,temp.lastIndexOf("/"));
								break;
							}
						}
						return path;
					}
				};
			
			return this.each(function(){
				//初始化日历对象
				$calendar = $("#"+CALENDAR);
				//初始化日历
				Calendar.initCalendar();
				$(this).click(function(){
					var $this = $(this);
					Calendar.loadCSS(BASE_ID,Calendar.getPath()+"/"+SKIN+"/"+BASE_CSS,function(){
						Calendar.loadCSS(SKIN_ID,Calendar.getPath()+"/"+SKIN+"/"+settings.skin+"/"+SKIN_NAME,function(){
							triggerElement = $this;
							lineHeight = parseInt(settings.height-4*settings.spaceWidth)/9;
							//样式初始化
							Calendar.initStyle();
							Calendar.loadCalendarBody(today.getFullYear(),today.getMonth());
							Calendar.resetLocation();
							Calendar.show();
						});
					});
				});
				
				//点击除文本框外和日历弹出层之外的所有地方关闭弹出层
				$(document).click(function(event){
					if(!triggerElement.triggerTarget(event) && !$("#"+CALENDAR).triggerTarget(event)) {
						Calendar.destory();
					}
				});
			});
		},
		//触发事件是否是对象本身
		triggerTarget:function(event){
			//如果触发的是事件本身或者对象内的元素
			return $(this).is(event.target) || $(this).has(event.target).length > 0; 
		}
	});
})(jQuery);
样式calendar.css(基础样式)

/**
 * 基本样式,必须导入
 * @author:xuzengqiang
 * @since :2015-2-12 17:06:02
**/
#calendar_box {display:block;position:absolute;}
#calendar_box .oper_date{text-align:center;float:left}
#calendar_box .oper_date a{cursor:pointer;width:20px}
#calendar_box .year_sub,#calendar_box .month_sub{float:left}
#calendar_box .year_add,#calendar_box .month_add{float:right}
#calendar_box b{display:block;width:0px;height:0px;clear:both;margin:0 auto}
#calendar_box .button{float:right}
#calendar_box .cal_center{overflow:hidden}
#calendar_box table{text-align:center}
#calendar_box table td{text-align:center;border-left:0;border-bottom:0;cursor:pointer;}
#calendar_box .week_head td{cursor:auto;background:#FFFFFF;border:0}
/*不能选择的日期*/
#calendar_box table .no_use{cursor:auto;}
#calendar_box button{float:right}
默认皮肤：default/style.css

/**
 * 默认皮肤css,灰色调
 * @author:xuzengqiang
 * @since :2015-2-12 17:08:21
**/
#calendar_box {background:#FFFFFF;border:1px solid #AFAFAF;font-size:10pt;}
#calendar_box .cal_head{background-color:#FFFFFF}
#calendar_box .oper_date{border:1px solid #AFAFAF}
#calendar_box .oper_date a{background:#FFFFFF}
#calendar_box .oper_date a:hover{background:#EFEFEF}
#calendar_box .year_sub,#calendar_box .month_sub{border-right:1px solid #AFAFAF}
#calendar_box .year_add,#calendar_box .month_add{border-left:1px solid #AFAFAF}
#calendar_box b{border-top:6px solid transparent;border-bottom:6px solid transparent}
#calendar_box .aLeft{border-right:6px solid #535353}
#calendar_box .aRight{border-left:6px solid #535353}
#calendar_box .oper_date a:hover .aLeft{border-right:6px solid #3399CC}
#calendar_box .oper_date a:hover .aRight{border-left:6px solid #3399CC}
#calendar_box .oper_date span{color:#535353}
#calendar_box .cal_center{border:1px solid #AFAFAF;;background:#FFFFFF;}
#calendar_box table td{border:0px solid #AFAFAF}
#calendar_box .week_head td{color:#000000;background:#EFEFEF}
#calendar_box .date_td td:hover{color:#3399CC;background:#EFEFEF}
#calendar_box .pre_month_day,#calendar_box .next_month_day{background:#FFFFFF;color:#CFCFCF;}
#calendar_box .this_month_day{background:#FFFFFF;color:#535353;}
#calendar_box .cal_bottom button{border:1px solid #AFAFAF;background:#FFFFFF;width:18%;color:#535353}
#calendar_box .cal_bottom a:hover button{border:1px solid #3399CC;background:#EFEFEF;color:#3399CC}
大红皮肤：red/style.css

/**
 * 大红皮肤css
 * @author:xuzengqiang
 * @since :2015-2-12 17:08:21
**/
#calendar_box {background:#FFFFFF;border:1px solid #AFAFAF;font-size:10pt;}
#calendar_box .cal_head{background-color:#FF0000}
#calendar_box .oper_date{border:0px solid #AFAFAF}
#calendar_box .oper_date a{background:#FF0000}
#calendar_box .oper_date a:hover{background:#FF9900}
#calendar_box .year_sub,#calendar_box .month_sub{border-right:0px solid #AFAFAF}
#calendar_box .year_add,#calendar_box .month_add{border-left:0px solid #AFAFAF}
#calendar_box b{border-top:6px solid transparent;border-bottom:6px solid transparent}
#calendar_box .aLeft{border-right:6px solid #FFFFFF}
#calendar_box .aRight{border-left:6px solid #FFFFFF}
#calendar_box .oper_date a:hover .aLeft{border-right:6px solid #FFFFFF}
#calendar_box .oper_date a:hover .aRight{border-left:6px solid #FFFFFF}
#calendar_box .oper_date span{color:#FFFFFF}
#calendar_box .cal_center{border:0px solid #AFAFAF;background:#FFFFFF;}
#calendar_box table td{border:0px solid #AFAFAF}
#calendar_box .week_head td{color:#000000;background:#FFFFFF}
#calendar_box .date_td td:hover{color:#FFFFFF;background:#FF9900}
#calendar_box .pre_month_day,#calendar_box .next_month_day{background:#FFFFFF;color:#CFCFCF;}
#calendar_box .this_month_day{background:#FFFFFF;color:#535353;}
#calendar_box .cal_bottom button{border:0px solid #FF0000;background:#FF0000;width:18%;color:#FFFFFF}
#calendar_box .cal_bottom a:hover button{border:0px solid #FF0000;background:#FF9900;color:#FFFFFF}
深蓝皮肤 blue/style.css

/**
 * 深蓝皮肤css
 * @author:xuzengqiang
 * @since :2015-2-12 17:08:21
**/
#calendar_box {background:#3399CC;border:1px solid #3399CC;font-size:10pt;}
#calendar_box .cal_head{background-color:#3399CC}
#calendar_box .oper_date{border:0px solid #AFAFAF}
#calendar_box .oper_date a{background:#33AADD}
#calendar_box .oper_date a:hover{background:#00CCCC}
#calendar_box .year_sub,#calendar_box .month_sub{border-right:0px solid #AFAFAF}
#calendar_box .year_add,#calendar_box .month_add{border-left:0px solid #AFAFAF}
#calendar_box b{border-top:6px solid transparent;border-bottom:6px solid transparent}
#calendar_box .aLeft{border-right:6px solid #FFFFFF}
#calendar_box .aRight{border-left:6px solid #FFFFFF}
#calendar_box .oper_date a:hover .aLeft{border-right:6px solid #FFFFFF}
#calendar_box .oper_date a:hover .aRight{border-left:6px solid #FFFFFF}
#calendar_box .oper_date span{color:#FFFFFF}
#calendar_box .cal_center{border:0px solid #AFAFAF}
#calendar_box table td{border:0px solid #AFAFAF;background:#3399CC;}
#calendar_box .week_head td{color:#FFFFFF;background:#3399CC}
#calendar_box .date_td td:hover{color:#FFFFFF;background:#00CCCC}
#calendar_box .pre_month_day,#calendar_box .next_month_day{background:#3399CC;color:#CFCFCF;}
#calendar_box .this_month_day{background:#3399CC;color:#FFFFFF;}
#calendar_box .cal_bottom button{border:1px solid #3399CC;background:#3399CC;width:18%;color:#FFFFFF}
#calendar_box .cal_bottom a:hover button{border:1px solid #3399CC;background:#00CCCC;color:#FFFFFF}










jquery日历插件(2)

标签：

原文地址：http://blog.csdn.net/xuzengqiang2/article/details/44016063
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！