jquery日历插件(2)
浏览数：34 /
时间：2015年06月09日
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}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
