jQuery日历插件编写jquery.calendar.js

最新推荐文章于 2025-06-25 13:01:03 发布

原创

最新推荐文章于 2025-06-25 13:01:03 发布 · 2.1w 阅读

11 ·

CC 4.0 BY-SA版权

本文介绍如何编写jQuery日历插件jquery.calendar.js，探讨了皮肤定制的挑战，提供了默认和多种自定义皮肤的样式预览，并详细说明了插件的调用方法及参数设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

样式预览：

默认皮肤1：

自定义皮肤2：(深蓝)

自定义皮肤3：(大红)

自定义皮肤4:炫酷黑

调用：

$(".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'
	});

参数：

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'
	};

测试代码：

<!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',
		btnF