码迷,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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!