【发布时间】:2012-12-31 09:40:23
【问题描述】:
我用 javascript 和 jquery(改编自 "Simple Calendar with Javascript")编写了一个日历,它允许我一次前后移动几个月。
每 4 年在 2 月增加一个额外的一天来计算闰年,但似乎因此导致了错误。
当您向后或向前移动时,它会更改日期并根据新日期运行calendar() 函数。通常,它有 5 行 7 列,每列包含一天。如果 5 排没有足够的空间,例如 31 天,第 1 排是星期六,那么它会额外增加第 6 排来容纳。
但是,在闰年期间,如果发生上述相同情况,该函数似乎不会添加额外的行。
这是一个 jsFiddle:http://jsfiddle.net/charlescarver/DrMWM/
calendar()的这个要点:
function calendar(d){
$("#calendar").remove();
$("body").append("<table border='1' id='calendar'></table>");
// Date vars
var today = new Date(d);
var month = today.getMonth();
var day = today.getDay();
var dayN = today.getDate();
var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthdays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var days = monthdays[month];
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
// Determine if leap year, if not, set to current year
if (month > 0) {
year = today.getYear();
if (year % 4 == 0){
days = 29;
}
} else {
year = today.getYear();
}
// Parse vars
var jumped = 0;
var inserted = 1;
var start = day - dayN%7 + 1;
if (start < 0) start += 7;
var weeks = parseInt((start + days)/7);
if ((start + days)%7 != 0){
weeks++;
}
$("#calendar").append("<tr><td class='month' colspan='7'>" + monthNames[month] + " - " + today.getFullYear() + "</td></tr>");
$("#calendar").append("<tr class='day'></tr>");
for (var i=0; i<7; i++) {
$(".day").append("<td>" + week[i][0] + "</td>");
}
function datDate(m, n, y){
date = new Date(" " + monthNames[m] + " " + n + " " + y);
return date;
}
for (var i=weeks; i>0; i--) {
if (i === i){
$("#calendar").append("<tr class=" + i + "></tr>");
for (var j=0; j<7; j++) {
console.log(inserted);
if (jumped<start || inserted>days) {
$("." + i).append("<td> </td>");
jumped++;
}
else {
m = month;
n = inserted;
y = today.getFullYear();
date = datDate(m, n, y);
if (inserted == dayN) {
$("." + i).append("<td><a class='calendar_date current_date' data-date='" + date + "'>[" + n + "]</a></td>");
} else {
$("." + i).append("<td><a class='calendar_date' data-date='" + date + "'>" + n + "</a></td>");
}
inserted++;
}
}
}
}
}
【问题讨论】:
-
为什么不只遍历您尝试渲染的月份中的日子,让内置的日期库完成所有繁重的工作?
-
你有这方面的例子吗?这听起来像是一种更清洁的方式......
-
@Charlie 你可以简单地增加日期;换句话说,如果您尝试将日期设置为 1 月 32 日,图书馆会“修复”日期,并且日期会在 2 月 1 日出现。
-
stackoverflow.com/a/10040679/176741 用于某些日期范围,然后将它们呈现回文本,但是您希望使用 w3schools.com/jsref/jsref_obj_date.asp
-
@Dolph Be wary of w3schools. MDN documentation site 通常更可靠,如果您在那里发现问题,您可以自己解决:-)
标签: javascript jquery