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',
btnFontC