1. IT分享知识网首页

calendar.js插件使用「终于解决」

老牧童 • • 未分类 • 阅读 382

calendar.js插件使用「终于解决」jQuery日历插件编写(jquery.calendar.js)：目前比较难解决的问题是：1、皮肤问题，虽然可以自定义皮肤，但是使用起来还是有一定的困难。样式预览：默认皮肤1：自定义皮肤2：(深蓝)自定义皮肤3：(大红)自定义皮肤4:炫酷黑调用：[javascript]viewplaincopy

大家好，欢迎来到IT知识分享网。



jQuery日历插件编写(jquery.calendar.js)：

目前比较难解决的问题是：

1、皮肤问题，虽然可以自定义皮肤，但是使用起来还是有一定的困难。

样式预览：

默认皮肤1：

calendar.js插件使用「终于解决」

自定义皮肤2：(深蓝)

calendar.js插件使用「终于解决」

自定义皮肤3：(大红)

calendar.js插件使用「终于解决」

自定义皮肤4:炫酷黑

calendar.js插件使用「终于解决」

调用：

[javascript]
view plain
copy
print
?

  1. $(“.startTime”).showCalendar({  
  2.         bgColor:“#000000”,  
  3.         topColor:“#000000”,  
  4.         weekBgColor:“#000000”,  
  5.         weekFontColor:“#FFFFFF”,  
  6.         innerBorder:“1px solid #FFFFFF”,  
  7.         ymFontColor:‘#FFFFFF’,  
  8.         ymBgColor:‘#000000’,  
  9.         ymHoverBgColor:‘#00CCCC’,  
  10.         arrowColor:“#FFFFFF”,  
  11.         noThisMonthFontColor:‘#9F9F9F’,  
  12.         thisMonthFontColor:‘#FFFFFF’,  
  13.         thisMonthBgColor:‘#000000’,  
  14.         dateHoverFontColor:‘#FFFFFF’,  
  15.         dateHoverBgColor:‘#00CCCC’,  
  16.         tableBorder:‘1px solid #FFFFFF’,  
  17.         btnBorder:‘0’,  
  18.         btnBgColor:‘#000000’,  
  19.         btnFontColor:‘#FFFFFF’,  
  20.         btnHoverBgColor:‘#00CCCC’,  
  21.         btnHoverFontColor:‘#FFFFFF’  
  22.     });  
$(".startTime").showCalendar({
		bgColor:"#000000",
		topColor:"#000000",
		weekBgColor:"#000000",
		weekFontColor:"#FFFFFF",
	    innerBorder:"1px solid #FFFFFF",
		ymFontColor:'#FFFFFF',
		ymBgColor:'#000000',
		ymHoverBgColor:'#00CCCC',
		arrowColor:"#FFFFFF",
		noThisMonthFontColor:'#9F9F9F',
		thisMonthFontColor:'#FFFFFF',
		thisMonthBgColor:'#000000',
		dateHoverFontColor:'#FFFFFF',
		dateHoverBgColor:'#00CCCC',
		tableBorder:'1px solid #FFFFFF',
		btnBorder:'0',
		btnBgColor:'#000000',
		btnFontColor:'#FFFFFF',
		btnHoverBgColor:'#00CCCC',
		btnHoverFontColor:'#FFFFFF'
	});

IT知识分享网

参数：

[javascript]
view plain
copy
print
?

  1. var defaultOptions = {  
  2.         //class名称  
  3.         className:‘strongCalendar’,  
  4.         //日历格式’yyyy-MM-dd'(‘yyyy-MM-dd’,’yyyy年MM月dd日’)  
  5.         format:‘yyyy-MM-dd’,  
  6.         //高度,默认220px  
  7.         height:220,  
  8.         //宽度:默认与文本框宽度相同  
  9.         width:$(this).innerWidth(),  
  10.         //日历框离文本框高度  
  11.         marginTop:1,  
  12.         //浮层z-index  
  13.         zIndex:99,  
  14.         //间隙距离,默认为5px  
  15.         spaceWidth:8,  
  16.         //字体大小,默认9pt  
  17.         fontSize:9,  
  18.         //日历背景色  
  19.         bgColor:‘#FFFFFF’,  
  20.         //默认浅灰色  
  21.         borderColor:“#AFAFAF”,  
  22.         //顶部背景颜色,默认为淡灰色  
  23.         topColor:‘#FFFFFF’,  
  24.         //当前年月字体颜色  
  25.         ymFontColor:‘#535353’,  
  26.         //年月份操作背景色  
  27.         ymBgColor:‘#FFFFFF’,  
  28.         //年月份移上背景色  
  29.         ymHoverBgColor:‘#EFEFEF’,  
  30.         //箭头颜色  
  31.         arrowColor:‘#535353’,  
  32.         //里层边框  
  33.         innerBorder:‘1px solid #AFAFAF’,  
  34.         //表格边框  
  35.         tableBorder:‘0px solid #AFAFAF’,  
  36.         //星期背景颜色  
  37.         weekBgColor:‘#EFEFEF’,  
  38.         //星期字体颜色  
  39.         weekFontColor:‘#535353’,  
  40.         //上个月和下个月日期的字体颜色  
  41.         noThisMonthFontColor:‘#CFCFCF’,  
  42.         //这个月的日期字体颜色  
  43.         thisMonthFontColor:‘#535353’,  
  44.         //这个的日期背景颜色  
  45.         thisMonthBgColor:‘#FFFFFF’,  
  46.         //日期移上时字体颜色  
  47.         dateHoverFontColor:‘#3399CC’,  
  48.         //日期移上时字体颜色  
  49.         dateHoverBgColor:‘#EFEFEF’,  
  50.         //button边框  
  51.         btnBorder:‘1px solid #AFAFAF’,  
  52.         //button背景色  
  53.         btnBgColor:‘#FFFFFF’,  
  54.         //button字体颜色  
  55.         btnFontColor:‘#535353’,  
  56.         //button鼠标移上颜色  
  57.         btnHoverBgColor:‘#EFEFEF’,  
  58.         //button鼠标移上字体颜色  
  59.         btnHoverFontColor:‘#3399CC’  
  60.     };  
IT知识分享网var defaultOptions = {
		//class名称
		className:'strongCalendar',
		//日历格式'yyyy-MM-dd'('yyyy-MM-dd','yyyy年MM月dd日')
		format:'yyyy-MM-dd',
		//高度,默认220px
		height:220,
		//宽度:默认与文本框宽度相同
		width:$(this).innerWidth(),
		//日历框离文本框高度
		marginTop:1,
		//浮层z-index
		zIndex:99,
		//间隙距离,默认为5px
		spaceWidth:8,
		//字体大小,默认9pt
		fontSize:9,
		//日历背景色
		bgColor:'#FFFFFF',
		//默认浅灰色
		borderColor:"#AFAFAF",
		//顶部背景颜色,默认为淡灰色
		topColor:'#FFFFFF',
		//当前年月字体颜色
		ymFontColor:'#535353',
		//年月份操作背景色
		ymBgColor:'#FFFFFF',
		//年月份移上背景色
		ymHoverBgColor:'#EFEFEF',
		//箭头颜色
		arrowColor:'#535353',
		//里层边框
		innerBorder:'1px solid #AFAFAF',
		//表格边框
		tableBorder:'0px solid #AFAFAF',
		//星期背景颜色
		weekBgColor:'#EFEFEF',
		//星期字体颜色
		weekFontColor:'#535353',
		//上个月和下个月日期的字体颜色
		noThisMonthFontColor:'#CFCFCF',
		//这个月的日期字体颜色
		thisMonthFontColor:'#535353',
		//这个的日期背景颜色
		thisMonthBgColor:'#FFFFFF',
		//日期移上时字体颜色
		dateHoverFontColor:'#3399CC',
		//日期移上时字体颜色
		dateHoverBgColor:'#EFEFEF',
		//button边框
		btnBorder:'1px solid #AFAFAF',
		//button背景色
		btnBgColor:'#FFFFFF',
		//button字体颜色
		btnFontColor:'#535353',
		//button鼠标移上颜色
		btnHoverBgColor:'#EFEFEF',
		//button鼠标移上字体颜色
		btnHoverFontColor:'#3399CC'
	};

测试代码：

[javascript]
view plain
copy
print
?

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  3. <head>  
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />  
  5. <title>无标题文档</title>  
  6. <script type=“text/javascript” src=“jquery-1.9.1.js”></script>  
  7. <script type=“text/javascript” src=“jquery.calendar.js”></script>  
  8. <style type=“text/css”>  
  9.     *{margin:0;padding:0;font-family:微软雅黑}  
  10.     input{margin-top:20px;margin-left:20px;border:1px solid #AFAFAF;  
  11.     line-height:25px;font-size:10pt;width:200px;height:30px; border-color:#535353}  
  12. </style>  
  13. </head>  
  14.   
  15. <body>  
  16.     <input type=“text” readonly=“readonly” class=“startTime”/>  
  17.     <input type=“text” readonly=“readonly” class=“endTime” />  
  18.     <input type=“text” readonly=“readonly” class=“testTime” />  
  19. </body>  
  20. <script type=“text/javascript”>  
  21.       
  22.     //默认皮肤  
  23.     $(“.startTime”).showCalendar();  
  24.       
  25.     //自定义深蓝皮肤  
  26.     $(“.endTime”).showCalendar({  
  27.         className:‘endDate_’,  
  28.         bgColor:“#3399CC”,  
  29.         topColor:“#3399CC”,  
  30.         weekBgColor:“#3399CC”,  
  31.         weekFontColor:“#FFFFFF”,  
  32.         innerBorder:“0”,  
  33.         ymFontColor:‘#FFFFFF’,  
  34.         ymBgColor:‘#33AADD’,  
  35.         ymHoverBgColor:‘#00CCCC’,  
  36.         arrowColor:“#FFFFFF”,  
  37.         noThisMonthFontColor:‘#BFBFBF’,  
  38.         thisMonthFontColor:‘#FFFFFF’,  
  39.         thisMonthBgColor:‘#3399CC’,  
  40.         dateHoverFontColor:‘#FFFFFF’,  
  41.         dateHoverBgColor:‘#00CCCC’,  
  42.         btnBorder:‘0’,  
  43.         btnBgColor:‘#3399CC’,  
  44.         btnFontColor:‘#FFFFFF’,  
  45.         btnHoverBgColor:‘#00CCCC’,  
  46.         btnHoverFontColor:‘#FFFFFF’  
  47.     });  
  48.       
  49.     //自定义大红皮肤  
  50.     $(“.testTime”).showCalendar({  
  51.         className:‘testDate_’,  
  52.         innerBorder:“0”,  
  53.         topColor:“#FF0000”,  
  54.         ymFontColor:‘#FFFFFF’,  
  55.         ymBgColor:‘#FF0000’,  
  56.         ymHoverBgColor:‘#FF9900’,  
  57.         arrowColor:“#FFFFFF”,  
  58.         weekBgColor:“#FFFFFF”,  
  59.         weekFontColor:‘#000000’,  
  60.         noThisMonthFontColor:‘#AFAFAF’,  
  61.         thisMonthFontColor:‘#000000’,  
  62.         dateHoverFontColor:‘#FFFFFF’,  
  63.         dateHoverBgColor:‘#FF7700’,  
  64.         btnBorder:‘0’,  
  65.         btnBgColor:‘#FF0000’,  
  66.         btnFontColor:‘#FFFFFF’,  
  67.         btnHoverBgColor:‘#FF7700’,  
  68.         btnHoverFontColor:‘#FFFFFF’  
  69.     });  
  70. </script>  
  71. </html>  
<!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>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.calendar.js"></script>
<style type="text/css">
	*{margin:0;padding:0;font-family:微软雅黑}
	input{margin-top:20px;margin-left:20px;border:1px solid #AFAFAF;
	line-height:25px;font-size:10pt;width:200px;height:30px; border-color:#535353}
</style>
</head>

<body>
	<input type="text" readonly="readonly" class="startTime"/>
	<input type="text" readonly="readonly" class="endTime" />
	<input type="text" readonly="readonly" class="testTime" />
</body>
<script type="text/javascript">
	
	//默认皮肤
	$(".startTime").showCalendar();
	
	//自定义深蓝皮肤
	$(".endTime").showCalendar({
		className:'endDate_',
		bgColor:"#3399CC",
		topColor:"#3399CC",
		weekBgColor:"#3399CC",
		weekFontColor:"#FFFFFF",
	    innerBorder:"0",
		ymFontColor:'#FFFFFF',
		ymBgColor:'#33AADD',
		ymHoverBgColor:'#00CCCC',
		arrowColor:"#FFFFFF",
		noThisMonthFontColor:'#BFBFBF',
		thisMonthFontColor:'#FFFFFF',
		thisMonthBgColor:'#3399CC',
		dateHoverFontColor:'#FFFFFF',
		dateHoverBgColor:'#00CCCC',
		btnBorder:'0',
		btnBgColor:'#3399CC',
		btnFontColor:'#FFFFFF',
		btnHoverBgColor:'#00CCCC',
		btnHoverFontColor:'#FFFFFF'
	});
	
	//自定义大红皮肤
	$(".testTime").showCalendar({
		className:'testDate_',
		innerBorder:"0",
		topColor:"#FF0000",
		ymFontColor:'#FFFFFF',
		ymBgColor:'#FF0000',
		ymHoverBgColor:'#FF9900',
		arrowColor:"#FFFFFF",
		weekBgColor:"#FFFFFF",
		weekFontColor:'#000000',
		noThisMonthFontColor:'#AFAFAF',
		thisMonthFontColor:'#000000',
		dateHoverFontColor:'#FFFFFF',
		dateHoverBgColor:'#FF7700',
		btnBorder:'0',
		btnBgColor:'#FF0000',
		btnFontColor:'#FFFFFF',
		btnHoverBgColor:'#FF7700',
		btnHoverFontColor:'#FFFFFF'
	});
</script>
</html>

具体jquery.calendar.js

[javascript]
view plain
copy
print
?

  1. /** 
  2.  * jquery日历插件jqyery.calendar.js 
  3.  * @author:xuzengqiang 
  4.  * @since :2015-2-4 15:31:39 
  5. **/  
  6. ;(function($){     
  7.     jQuery.fn.extend({  
  8.         showCalendar:function(options){  
  9.         var defaultOptions = {  
  10.                 //class名称  
  11.                 className:‘strongCalendar’,  
  12.                 //日历格式’yyyy-MM-dd'(‘yyyy-MM-dd’,’yyyy年MM月dd日’)  
  13.                 format:‘yyyy-MM-dd’,  
  14.                 //高度,默认220px  
  15.                 height:220,  
  16.                 //宽度:默认与文本框宽度相同  
  17.                 width:$(this).innerWidth(),  
  18.                 //日历框离文本框高度  
  19.                 marginTop:1,  
  20.                 //浮层z-index  
  21.                 zIndex:99,  
  22.                 //间隙距离,默认为5px  
  23.                 spaceWidth:8,  
  24.                 //字体大小,默认9pt  
  25.                 fontSize:9,  
  26.                 //日历背景色  
  27.                 bgColor:‘#FFFFFF’,  
  28.                 //默认浅灰色  
  29.                 borderColor:“#AFAFAF”,  
  30.                 //顶部背景颜色,默认为淡灰色  
  31.                 topColor:‘#FFFFFF’,  
  32.                 //当前年月字体颜色  
  33.                 ymFontColor:‘#535353’,  
  34.                 //年月份操作背景色  
  35.                 ymBgColor:‘#FFFFFF’,  
  36.                 //年月份移上背景色  
  37.                 ymHoverBgColor:‘#EFEFEF’,  
  38.                 //箭头颜色  
  39.                 arrowColor:‘#535353’,  
  40.                 //里层边框  
  41.                 innerBorder:‘1px solid #AFAFAF’,  
  42.                 //表格边框  
  43.                 tableBorder:‘0px solid #AFAFAF’,  
  44.                 //星期背景颜色  
  45.                 weekBgColor:‘#EFEFEF’,  
  46.                 //星期字体颜色  
  47.                 weekFontColor:‘#535353’,  
  48.                 //上个月和下个月日期的字体颜色  
  49.                 noThisMonthFontColor:‘#CFCFCF’,  
  50.                 //这个月的日期字体颜色  
  51.                 thisMonthFontColor:‘#535353’,  
  52.                 //这个的日期背景颜色  
  53.                 thisMonthBgColor:‘#FFFFFF’,  
  54.                 //日期移上时字体颜色  
  55.                 dateHoverFontColor:‘#3399CC’,  
  56.                 //日期移上时字体颜色  
  57.                 dateHoverBgColor:‘#EFEFEF’,  
  58.                 //button边框  
  59.                 btnBorder:‘1px solid #AFAFAF’,  
  60.                 //button背景色  
  61.                 btnBgColor:‘#FFFFFF’,  
  62.                 //button字体颜色  
  63.                 btnFontColor:‘#535353’,  
  64.                 //button鼠标移上颜色  
  65.                 btnHoverBgColor:‘#EFEFEF’,  
  66.                 //button鼠标移上字体颜色  
  67.                 btnHoverFontColor:‘#3399CC’  
  68.             };  
  69.             var settings = jQuery.extend(defaultOptions,options || {}),  
  70.                 $body = $(“body”),  
  71.                 date = new Date(),  
  72.                 currentYear = date.getFullYear(),  
  73.                 currentMonth = date.getMonth(),  
  74.                 monthDay = [],  
  75.                 //行高  
  76.                 lineHeight = parseInt(settings.height-4*settings.spaceWidth)/9,  
  77.                 $calendar,  
  78.                 //触发事件对象  
  79.                 $target = $(this),  
  80.                 current ;  
  81.               
  82.             //对于小于10的数字前+0  
  83.             Number.prototype.addZero = function(){  
  84.                 return this<10?“0”+this:this;  
  85.             };  
  86.             var Calendar = {  
  87.                     //星期列表  
  88.                     weeks : [‘日’,‘一’,‘二’,‘三’,‘四’,‘五’,‘六’],  
  89.                     //每月的天数  
  90.                     months : [31,0,31,30,31,30,31,31,30,31,30,31],  
  91.                     //初始化日历  
  92.                     loadCalendar:function(){  
  93.                         $body.append(“<div class=”+settings.className+“></div>”);  
  94.                         $calendar = $(“.”+settings.className);  
  95.                         //新增核心html  
  96.                         $calendar.append(Calendar.innerHTML());  
  97.                         //样式加载  
  98.                         Calendar.styleLoader();  
  99.                         //核心日历加载  
  100.                         Calendar.loaderDate(currentYear,currentMonth);  
  101.                         //事件绑定  
  102.                         Calendar.dateEvent();  
  103.                     },  
  104.                     //日历核心HTML  
  105.                     innerHTML:function(){  
  106.                         var htmlContent = {};  
  107.                         htmlContent = “<div class=’cal_head’>”+ <!–头部div层start–>  
  108.                                           “<div class=’year_oper oper_date’>”+  
  109.                                             “<div class=’year_sub operb’><b class=’arrow aLeft’/></div>”+  
  110.                                             “<div class=’year_add operb’><b class=’arrow aRight’/></div>”+  
  111.                                             “<span class=’current_year’></span>”+   
  112.                                             <!–位置互换下,考虑到span后面float:right会换行–>  
  113.                                           “</div>”+  
  114.                                           “<div class=’month_oper oper_date’>”+  
  115.                                             “<div class=’month_sub operb’><b class=’arrow aLeft’/></div>”+  
  116.                                             “<div class=’month_add operb’><b class=’arrow aRight’/></div>”+  
  117.                                             “<span class=’current_month’></span>”+  
  118.                                           “</div>”+  
  119.                                       “</div>”+ <!–头部div层end–>  
  120.                                       “<div class=’cal_center’><table cellspacing=’0′></table></div>”+  
  121.                                       “<div class=’cal_bottom’>”+ <!–底部div层start–>  
  122.                                         “<button class=’clear_date’>清空</button>”+  
  123.                                         “<button class=’today_date’>今天</button>”+  
  124.                                         “<button class=’confirm_date’>确定</button>”+  
  125.                                       “</div>”;<!–底部div层end–>  
  126.                         return htmlContent;  
  127.                                      
  128.                     },  
  129.                     //日历样式加载  
  130.                     styleLoader:function(){  
  131.                         $calendar = $(“.”+settings.className);    
  132.                         //总弹出层样式设置  
  133.                         $calendar.css({
    “border-width”:“1px”,  
  134.                                        “border-color”:settings.borderColor,  
  135.                                        “background-color”:settings.bgColor,  
  136.                                        “border-style”:“solid”,  
  137.                                        “height”:settings.height,  
  138.                                        “width”:settings.width,  
  139.                                        “z-index”:settings.zIndex,  
  140.                                        “font-size”:settings.fontSize+“pt”  
  141.                                       });  
  142.                         Calendar.setLocation();  
  143.                         //日历顶部样式设置  
  144.                         var $calHead=$calendar.find(“.cal_head”),  
  145.                             $operDate=$calendar.find(“.oper_date”),  
  146.                             $arrow=$calHead.find(“.arrow”),  
  147.                             $center=$calendar.find(“.cal_center”),  
  148.                             $ctable=$center.find(“table”),  
  149.                             //箭头大小  
  150.                             arrowWidth = 6,  
  151.                             $calBottom = $calendar.find(“.cal_bottom”);  
  152.                               
  153.                         $calHead.css({
    “height”:lineHeight+2*settings.spaceWidth,  
  154.                                       “background-color”:settings.topColor  
  155.                                      });  
  156.                           
  157.                         $operDate.css({
    “margin-top”:settings.spaceWidth,  
  158.                                        “margin-left”:settings.spaceWidth,  
  159.                                        “float”:“left”,  
  160.                                        “border”:settings.innerBorder,  
  161.                                        “text-align”:“center”  
  162.                                      });  
  163.                         //设置operDate包含边框的实际宽度  
  164.                         $operDate.outerWidth(($calHead.width()-3*settings.spaceWidth)/2);  
  165.                         $operDate.outerHeight(lineHeight);  
  166.                         $operDate.find(“.operb”)  
  167.                                  .css({
    “width”:“20px”,  
  168.                                        “background”:settings.ymBgColor,  
  169.                                        “height”:$operDate.innerHeight(),  
  170.                                        “cursor”:“pointer”  
  171.                                      });  
  172.                         $operDate.find(“.year_sub,.month_sub”)  
  173.                                  .css({
    “float”:“left”,“border-right”:settings.innerBorder});  
  174.                         $operDate.find(“.year_add,.month_add”)  
  175.                                  .css({
    “float”:“right”,“border-left”:settings.innerBorder});  
  176.                         $operDate.find(“span”)  
  177.                                  .css({
    “color”:settings.ymFontColor,  
  178.                                        “line-height”:$operDate.height()+“px”  
  179.                                      });  
  180.                                    
  181.                         //设置箭头样式  
  182.                         $operDate.find(“.aLeft”)  
  183.                                  .arrow({
    “direction”:“left”,  
  184.                                          “width”:arrowWidth,  
  185.                                          “height”:arrowWidth*2,  
  186.                                          “color”:settings.arrowColor  
  187.                                        });  
  188.                         $operDate.find(“.aRight”)  
  189.                                  .arrow({
    “direction”:“right”,  
  190.                                          “width”:arrowWidth,  
  191.                                          “height”:arrowWidth*2,  
  192.                                          “color”:settings.arrowColor  
  193.                                        });  
  194.                         $arrow.css({  
  195.                             “margin”:“0 auto”,  
  196.                             “margin-top”:parseInt($operDate.innerHeight())/2-arrowWidth     
  197.                         });  
  198.                           
  199.                         //加载中间表格样式  
  200.                         $center.css({  
  201.                             “border”:settings.innerBorder,  
  202.                             “margin-left”:settings.spaceWidth,  
  203.                             “overflow”:‘hidden’  
  204.                         });  
  205.                         //加载中间表格实际宽度  
  206.                         $center.outerWidth($calendar.width()-2*settings.spaceWidth);  
  207.                         $center.height(lineHeight*7);  
  208.                           
  209.                         $ctable.find(“td”).css({
    “text-align”:“center”});  
  210.                         $calBottom.css({
    “margin-right”:settings.spaceWidth});  
  211.                         $calBottom.find(“button”)  
  212.                                   .css({
    “border”:settings.btnBorder,  
  213.                                         “background”:settings.btnBgColor,  
  214.                                         “color”:settings.btnFontColor,  
  215.                                         “margin-top”:settings.spaceWidth,  
  216.                                         “margin-left”:settings.spaceWidth,  
  217.                                         “float”:“right”,“width”:“20%”  
  218.                                       });  
  219.                         $calBottom.find(“button”).outerHeight(lineHeight);  
  220.                         //去除button链接的虚线框  
  221.                         $(“.”+settings.className+” button”).focus(function(){
    this.blur()});  
  222.                           
  223.                         $operDate.find(“.operb”).hover(function(){  
  224.                             $(this).css(“background”,settings.ymHoverBgColor);                         
  225.                         },function(){  
  226.                             $(this).css(“background”,settings.ymBgColor);  
  227.                         });  
  228.                           
  229.                         $calBottom.find(“button”).hover(function(){  
  230.                             $(this).css({
    “background”:settings.btnHoverBgColor,“color”:settings.btnHoverFontColor});  
  231.                         },function(){  
  232.                             $(this).css({
    “background”:settings.btnBgColor,“color”:settings.btnFontColor});  
  233.                         });  
  234.                     },  
  235.                     //事件绑定  
  236.                     dateEvent:function(){  
  237.                         var $calendar = $(“.”+settings.className);  
  238.                         $calendar.find(“.year_add”).click(function(){Calendar.yearAdd();});  
  239.                         $calendar.find(“.year_sub”).click(function(){Calendar.yearSub();});  
  240.                         $calendar.find(“.month_add”).click(function(){Calendar.monthAdd();});  
  241.                         $calendar.find(“.month_sub”).click(function(){Calendar.monthSub();});  
  242.                         $calendar.find(“.confirm_date”).click(function(){Calendar.confirm();});  
  243.                         $calendar.find(“.today_date”).click(function(){Calendar.getToday();});  
  244.                         $calendar.find(“.clear_date”).click(function(){Calendar.clear();});  
  245.                     },  
  246.                     //当前日期:年份和月份  
  247.                     date:function(){  
  248.                         var $calendar = $(“.”+settings.className);  
  249.                         return {  
  250.                             year:parseInt($calendar.find(“.current_year”).html()),  
  251.                             month:parseInt($calendar.find(“.current_month”).html())  
  252.                         };  
  253.                     },  
  254.                     //年份自增  
  255.                     yearAdd:function(){  
  256.                         Calendar.loaderDate(Calendar.date().year+1,Calendar.date().month-1);  
  257.                     },  
  258.                     //年份自减  
  259.                     yearSub:function(){  
  260.                         Calendar.loaderDate(Calendar.date().year-1,Calendar.date().month-1);  
  261.                     },  
  262.                     //月份自增  
  263.                     monthAdd:function(){  
  264.                         var year = Calendar.date().year, month = Calendar.date().month;  
  265.                         if(month==12) {    
  266.                             month=1;    
  267.                             year=year+1;    
  268.                         } else {    
  269.                             month=month+1;    
  270.                         }    
  271.                         Calendar.loaderDate(year,month-1);  
  272.                     },  
  273.                     //月份自减  
  274.                     monthSub:function(){  
  275.                         var year = Calendar.date().year, month = Calendar.date().month;  
  276.                         if(month==1) {    
  277.                             month=12;    
  278.                             year=year-1;    
  279.                         } else {    
  280.                             month=month-1;    
  281.                         }    
  282.                         Calendar.loaderDate(year,month-1);  
  283.                     },  
  284.                     //日期选择  
  285.                     dateChoose:function($object){  
  286.                         var year = Calendar.date().year, month = Calendar.date().month;  
  287.                         //上一个月  
  288.                         if($object.hasClass(“pre_month_day”)) {  
  289.                             if(month == 1) {  
  290.                                 year = year-1;  
  291.                                 month = 12;  
  292.                             } else {  
  293.                                 month = (month-1).addZero();  
  294.                             }  
  295.                         //当前月     
  296.                         } else if($object.hasClass(“this_month_day”)) {  
  297.                             month = month.addZero();  
  298.                         //下一个月  
  299.                         } else {  
  300.                             if(month == 12) {  
  301.                                 month = “01”;  
  302.                                 year = year + 1;  
  303.                             } else {  
  304.                                 month = (month+1).addZero();  
  305.                             }  
  306.                         }  
  307.                         current.val(year+“-“+month+“-“+$object.text());  
  308.                     },  
  309.                     //确定事件  
  310.                     confirm:function(){  
  311.                         Calendar.destory();  
  312.                     },  
  313.                     //是否是闰年  
  314.                     isLeapYear:function(year){  
  315.                         if((year%4==0 && year%100!=0) || (year%400==0)) {  
  316.                             return true;      
  317.                         }  
  318.                         return false;  
  319.                     },      
  320.                     //指定年份二月的天数  
  321.                     februaryDays:function(year){  
  322.                         if(typeof year !== “undefined” && parseInt(year) === year) {  
  323.                             return Calendar.isLeapYear(year) ? 29:28;  
  324.                         }  
  325.                         return false;  
  326.                     },  
  327.                     getWeek:function(num){  
  328.                         return Calendar.weeks[num];  
  329.                     },  
  330.                     //获取指定月份[0,11]的天数  
  331.                     getMonthDay:function(year,month){  
  332.                         if(month === 1){  
  333.                             return Calendar.februaryDays(year);  
  334.                         }  
  335.                         month=(month===-1)?11:month;  
  336.                         return Calendar.months[month];  
  337.                     },  
  338.                     //今天  
  339.                     getToday:function(){  
  340.                         var date = new Date(),  
  341.                             year = date.getFullYear(),  
  342.                             month = (date.getMonth()+1).addZero(),  
  343.                             day = date.getDate().addZero();  
  344.                         current.val(year+“-“+month+“-“+day);  
  345.                         Calendar.destory();  
  346.                     },  
  347.                     //清空  
  348.                     clear:function(){  
  349.                         current.val(“”);  
  350.                         Calendar.destory();  
  351.                     },  
  352.                     //设置日历位置  
  353.                     setLocation:function(){  
  354.                         $calendar = $(“.”+settings.className);    
  355.                         var left = current.offset().left,  
  356.                             top = current.offset().top + current.innerHeight() + settings.marginTop;  
  357.                         $calendar.css({
    “position”:“absolute”,“left”:left,“top”:top});  
  358.                     },  
  359.                     //关闭日历  
  360.                     destory:function(){  
  361.                         $(“.”+settings.className).empty().remove();  
  362.                     },  
  363.                     //初始化日历主体内容  
  364.                     loaderDate:function(year,month){  
  365.                         //初始化日期为当前年当前月的1号,获取1号对应的星期     
  366.                         var oneWeek=new Date(year,month,1).getDay(),  
  367.                             $calendar = $(“.”+settings.className),  
  368.                             $calTable = $calendar.find(“table”),  
  369.                             //这个月天数  
  370.                             thisMonthDay = Calendar.getMonthDay(year,month),  
  371.                             //获取上一个的天数  
  372.                             preMonthDay;  
  373.                         //清空日期列表  
  374.                         $calTable.html(“”);  
  375.                           
  376.                         $calendar.find(“.current_year”).text(year+“年”);   
  377.                         $calendar.find(“.current_month”).text((month+1)+“月”);     
  378.                         if(oneWeek == 0) oneWeek = 7;  
  379.                           
  380.                         if(i==0) {  
  381.                             preMonthDay = Calendar.getMonthDay(year-1,11);  
  382.                         } else {  
  383.                             preMonthDay = Calendar.getMonthDay(year,month-1);  
  384.                         }  
  385.                         var start = 1, end = 1;    
  386.                         for(var i=0;i<7;i++) {  
  387.                             var dayHTML = “”;  
  388.                             if(i==0) {  
  389.                                 $calTable.append(“<tr class=’week_head’><tr>”);  
  390.                             }  
  391.                             for(var j=1;j<=7;j++) {    
  392.                                 //设置星期列表  
  393.                                 if(i==0) {     
  394.                                     $calTable.find(“.week_head”).append(“<td>”+Calendar.getWeek(j-1)+“</td>”);   
  395.                                 } else {    
  396.                                     if((i-1)*7+j<=oneWeek) { //从第二行开始设置值                         
  397.                                         dayHTML+=“<td class=’pre_month_day’>”+(preMonthDay-oneWeek+j)+“</td>”;  
  398.                                     } else if((i-1)*7+j<=thisMonthDay+oneWeek ){    
  399.                                         var result=(start++).addZero();    
  400.                                         dayHTML+=“<td class=’this_month_day’>”+result+“</td>”;  
  401.                                     } else {    
  402.                                         var result=(end++).addZero();    
  403.                                         dayHTML +=“<td class=’next_month_day’>”+result+“</td>”;   
  404.                                     }    
  405.                                 }     
  406.                             }       
  407.                             if(i>0){  
  408.                                 $calTable.append(“<tr>”+dayHTML+“</tr>”);  
  409.                             }  
  410.                         }   
  411.                         Calendar.tableStyle();  
  412.                     },  
  413.                     //表格样式初始化  
  414.                     tableStyle:function(){  
  415.                         //表格中单元格的宽度  
  416.                         var $center = $calendar.find(“.cal_center”),  
  417.                             $calTable = $calendar.find(“table”),  
  418.                             tdWidth = parseFloat($center.width())/7;  
  419.                               
  420.                         $calTable.find(“td”).css({
    “width”:tdWidth,“text-align”:“center”,  
  421.                                                   “color”:“#AFAFAF”,  
  422.                                                   “background”:settings.thisMonthBgColor,“cursor”:“pointer”,  
  423.                                                   “color”:settings.thisMonthFontColor,  
  424.                                                   “border-top”:settings.tableBorder,  
  425.                                                   “border-right”:settings.tableBorder});  
  426.                         $calTable.find(“.week_head td”)  
  427.                                  .css({
    “background”:settings.weekBgColor,  
  428.                                        “cursor”:“auto”,“border”:“0”,  
  429.                                        “color”:settings.weekFontColor  
  430.                                      });  
  431.                         $calTable.find(“.pre_month_day,.next_month_day”)  
  432.                                  .css({
    “color”:settings.noThisMonthFontColor,“background”:“transparent”});  
  433.                         //去除最右侧表格的右边框  
  434.                         $calTable.find(“td:nth-child(7n)”).css({
    “border-right”:0});  
  435.                         $calTable.find(“td”).outerHeight(lineHeight);  
  436.                       
  437.                         $calTable.find(“tr[class!=week_head] td”).hover(function(){  
  438.                             $(this).css({
    “background”:settings.dateHoverBgColor,  
  439.                                          “color”:settings.dateHoverFontColor  
  440.                                        });  
  441.                         },function(){  
  442.                             $(this).css({
    “background”:settings.thisMonthBgColor});  
  443.                             if($(this).hasClass(“this_month_day”)) {  
  444.                                 $(this).css({
    “color”:settings.thisMonthFontColor});  
  445.                             } else {  
  446.                                 $(this).css({
    “color”:settings.noThisMonthFontColor});  
  447.                             }  
  448.                         }).click(function(){Calendar.dateChoose($(this));});  
  449.                     }  
  450.                 };  
  451.               
  452.             return this.each(function(){  
  453.                 $target.click(function(){  
  454.                     //触发对象,请写在点击事件中,不然会做为全局变量!  
  455.                     current = $(this);  
  456.                     //如果没有生成日历元素  
  457.                     if($(“.”+settings.className).length == 0) {  
  458.                         Calendar.loadCalendar();                     
  459.                     }  
  460.                 });  
  461.                 //事件触发对象  
  462.                 $(document).click(function(event){  
  463.                     var $calendar = $(“.”+settings.className)  
  464.                     if(!$target.triggerTarget(event) && !$calendar.triggerTarget(event)) {  
  465.                         Calendar.destory();  
  466.                     }  
  467.                 });  
  468.             });  
  469.         },  
  470.         /** 
  471.          *描述:生成指定箭头样式 
  472.         **/  
  473.         arrow:function(options){  
  474.             var defaultOptions = {  
  475.                     color:‘#AFAFAF’,  
  476.                     height:20,  
  477.                     width:20,  
  478.                     //方向:默认向上’top’,供选择[‘up’,’bottom’,’left’,’right’]  
  479.                     direction:‘top’  
  480.                 };  
  481.             var settings = jQuery.extend(defaultOptions,options||{}),  
  482.                 current = $(this);  
  483.             function loadStyle(){  
  484.                 current.css({
    “display”:“block”,“width”:“0”,“height”:“0”});  
  485.                 if(settings.direction === “top” || settings.direction === “down”) {  
  486.                     current.css({  
  487.                                 “border-left-width”:settings.width/2,  
  488.                                 “border-right-width”:settings.width/2,  
  489.                                 “border-left-style”:“solid”,  
  490.                                 “border-right-style”:“solid”,  
  491.                                 “border-left-color”:“transparent”,  
  492.                                 “border-right-color”:“transparent”  
  493.                                 });  
  494.                     if(settings.direction === “top”) {  
  495.                         current.css({  
  496.                                 “border-bottom-width”:settings.height,  
  497.                                 “border-bottom-style”:“solid”,  
  498.                                 “border-bottom-color”:settings.color      
  499.                                 });  
  500.                     } else {  
  501.                         current.css({  
  502.                                 “border-top-width”:settings.height,  
  503.                                 “border-top-style”:“solid”,  
  504.                                 “border-top-color”:settings.color     
  505.                                 });  
  506.                     }  
  507.                 } else if(settings.direction === “left” || settings.direction === “right”) {  
  508.                     current.css({  
  509.                                 “border-top-width”:settings.height/2,  
  510.                                 “border-bottom-width”:settings.height/2,  
  511.                                 “border-top-style”:“solid”,  
  512.                                 “border-bottom-style”:“solid”,  
  513.                                 “border-top-color”:“transparent”,  
  514.                                 “border-bottom-color”:“transparent”  
  515.                                 });  
  516.                     if(settings.direction === “left”) {  
  517.                         current.css({  
  518.                                 “border-right-width”:settings.width,  
  519.                                 “border-right-style”:“solid”,  
  520.                                 “border-right-color”:settings.color   
  521.                                 });  
  522.                     } else {  
  523.                         current.css({  
  524.                                 “border-left-width”:settings.width,  
  525.                                 “border-left-style”:“solid”,  
  526.                                 “border-left-color”:settings.color    
  527.                                 });  
  528.                     }  
  529.                 }  
  530.             }  
  531.             return this.each(function(){ loadStyle(); });  
  532.         },  
  533.         //触发事件是否是对象本身  
  534.         triggerTarget:function(event){  
  535.             //如果触发的是事件本身或者对象内的元素  
  536.             return $(this).is(event.target) || $(this).has(event.target).length > 0;   
  537.         },  
  538.         //皮肤  
  539.         skin:function(){  
  540.               
  541.         }  
  542.     });  
  543. })(jQuery);  

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/9935.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信