Html精美日历插件,包括日期选择,日期查看,星期查看等等功能。文章末尾附有演示地址。先看看效果图:
源代码:var CalendarHandler = {
currentYear: 0,
currentMonth: 0,
isRunning: false,
initialize: function() {
$calendarItem = this.CreateCalendar(0, 0, 0);
$("#Container").append($calendarItem);
$("#context").css("height", $("#CalendarMain").height() - 65 "px");
$("#center").css("height", $("#context").height() - 30 "px");
$("#selectYearDiv").css("height", $("#context").height() - 30 "px").css("width", $("#context").width() "px");
$("#selectMonthDiv").css("height", $("#context").height() - 30 "px").css("width", $("#context").width() "px");
$("#centerCalendarMain").css("height", $("#context").height() - 30 "px").css("width", $("#context").width() "px");
$calendarItem.css("height", $("#context").height() - 30 "px"); //.css("visibility","hidden");
$("#Container").css("height", "0px").css("width", "0px").css("margin-left", $("#context").width() / 2 "px").css("margin-top", ($("#context").height() - 30) / 2 "px");
$("#Container").animate({
width: $("#context").width() "px",
height: ($("#context").height() - 30) * 2 "px",
marginLeft: "0px",
marginTop: "0px"
}, 300, function() {
$calendarItem.css("visibility", "visible");
});
$(".dayItem").css("width", $("#context").width() "px");
var itemPaddintTop = $(".dayItem").height() / 6;
$(".item").css({
"width": $(".week").width() / 7 "px",
"line-height": itemPaddintTop "px",
"height": itemPaddintTop "px"
});
$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 "px").css("margin-top", ($(".item").height() - 25) / 2 "px");
$(".week>h3").css("width", $(".week").width() / 7 "px");
this.RunningTime();
},
CreateSelectYear: function() {
$(".currentDay").show();
$("#selectYearDiv").children().remove();
var yearindex = 0;
for (var i = this.currentYear - 5; i
yearindex ;
if (i == this.currentYear) $("#selectYearDiv").append($("" i ""));
else $("#selectYearDiv").append($("" i ""));
if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#" yearindex).css("border-left-color", "#fff");
if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#" yearindex).css("border-right-color", "#fff");
}
$("#selectYearDiv>div").css("width", ($("#center").width() - 4) / 4 "px").css("line-height", ($("#center").height() - 4) / 3 "px");
$("#centerMain").animate({
marginLeft: "0px"
}, 300);
},
CreateSelectMonth: function() {
$(".currentDay").show();
$("#selectMonthDiv").children().remove();
for (var i = 1; i
if (i == this.currentMonth) $("#selectMonthDiv").append($("" i "月"));
else $("#selectMonthDiv").append($("" i "月"));
if (i == 1 || i == 5 || i == 9) $("#selectMonthDiv").find("#" i).css("border-left-color", "#fff");
if (i == 4 || i == 8 || i == 12) $("#selectMonthDiv").find("#" i).css("border-right-color", "#fff");
}
$("#selectMonthDiv>div").css("width", ($("#center").width() - 4) / 4 "px").css("line-height", ($("#center").height() - 4) / 3 "px");
$("#centerMain").animate({
marginLeft: -$("#center").width() * 2 "px"
}, 300);
},
IsRuiYear: function(aDate) {
return (0 == aDate % 4 && (aDate % 100 != 0 || aDate % 400 == 0));
},
CalculateWeek: function(y, m, d) {
if (m == 1) {
m = 13;
y--;
}
if (m == 2) {
m = 14;
y--;
}
var week = (d 2 * m 3 * (m 1) / 5 y y / 4 - y / 100 y / 400) % 7 1;
return week;
},
CalculateMonthDays: function(m, y) {
var mDay = 0;
if (m == 0 || m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
mDay = 31;
} else {
if (m == 2) {
//判断是否为芮年
var isRn = this.IsRuiYear(y);
if (isRn == true) {
mDay = 29;
} else {
mDay = 28;
}
} else {
mDay = 30;
}
}
return mDay;
},
CreateCalendar: function(y, m, d) {
$dayItem = $("");
//获取当前月份的天数
var nowDate = new Date();
if(y==nowDate.getFullYear()&&m==nowDate.getMonth() 1||(y==0&&m==0))
$(".currentDay").hide();
var nowYear = y == 0 ? nowDate.getFullYear() : y;
this.currentYear = nowYear;
var nowMonth = m == 0 ? nowDate.getMonth() 1 : m;
this.currentMonth = nowMonth;
var nowDay = d == 0 ? nowDate.getDate() : d;
$(".selectYear").html(nowYear "年");
$(".selectMonth").html(nowMonth "月");
var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear);
//获取当月第一天是星期几
//var weekDate = new Date(nowYear "-" nowMonth "-" 1);
//alert(ss.getDay());
var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1));
//var nowWeek=weekDate.getDay();
//获取上个月的天数
var lastMonthDaysNub = this.CalculateMonthDays((nowMonth - 1), nowYear);
if (nowWeek != 0) {
//生成上月剩下的日期
for (var i = (lastMonthDaysNub - (nowWeek - 1)); i
$dayItem.append("" (i 1) "");
}
}
//生成当月的日期
for (var i = 0; i
if (i == (nowDay - 1)) $dayItem.append("" (i 1) "");
else $dayItem.append("" (i 1) "");
}
//获取总共已经生成的天数
var hasCreateDaysNub = nowWeek nowDaysNub;
//如果小于42,往下个月推算
if (hasCreateDaysNub
for (var i = 0; i <= (42 - hasCreateDaysNub); i ) {
$dayItem.append("" (i 1) "");
}
}
return $dayItem;
},
CSS: function() {
var itemPaddintTop = $(".dayItem").height() / 6;
$(".item").css({
"width": $(".week").width() / 7 "px",
"line-height": itemPaddintTop "px",
"height": itemPaddintTop "px"
});
$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 "px").css("margin-top", ($(".item").height() - 25) / 2 "px");
},
CalculateNextMonthDays: function() {
if (this.isRunning == false) {
$(".currentDay").show();
var m = this.currentMonth == 12 ? 1 : this.currentMonth 1;
var y = this.currentMonth == 12 ? (this.currentYear 1) : this.currentYear;
var d = 0;
var nowDate = new Date();
if (y == nowDate.getFullYear() && m == nowDate.getMonth() 1) d = nowDate.getDate();
else d = 1;
$calendarItem = this.CreateCalendar(y, m, d);
$("#Container").append($calendarItem);
this.CSS();
this.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
}
},
CalculateLastMonthDays: function() {
if (this.isRunning == false) {
$(".currentDay").show();
var nowDate = new Date();
var m = this.currentMonth == 1 ? 12 : this.currentMonth - 1;
var y = this.currentMonth == 1 ? (this.currentYear - 1) : this.currentYear;
var d = 0;
if (y == nowDate.getFullYear() && m == nowDate.getMonth() 1) d = nowDate.getDate();
else d = 1;
$calendarItem = this.CreateCalendar(y, m, d);
$("#Container").append($calendarItem);
var itemPaddintTop = $(".dayItem").height() / 6;
this.CSS();
this.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
}
},
CreateCurrentCalendar: function() {
if (this.isRunning == false) {
$(".currentDay").hide();
$calendarItem = this.CreateCalendar(0, 0, 0);
$("#Container").append($calendarItem);
this.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
this.CSS();
$("#centerMain").animate({
marginLeft: -$("#center").width() "px"
}, 500);
}
},
RunningTime: function() {
var mTiming = setInterval(function() {
var nowDate = new Date();
var nowTime = nowDate.getHours() ":" nowDate.getMinutes() ":" nowDate.getSeconds();
$("#footNow").html(nowTime);
}, 1000);
}
}