Question

我正在尝试绘制有3行的表格。第一行应具有月份名称，第二行应包含月份日期和第三天。像这样的东西： enter image description here

我设法做了这样的事情，但仅限于2013年。我希望在特定时间段内获得自定义表格。因此，如果我指定我想要从2013-01-15到2013-02-10的表，那么它将在第二行和第三行中有27列，在第一行中有2列（具有正确的行数）。

这就是我现在所拥有的：http://jsfiddle.net/Misiu/amEug/

这是我今年的表生成代码：

var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var dayNames = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Sn"];
var months = '';
for (var i = 0; i < monthNames.length; i++) {
    months += '<td colspan="' + monthDays[i] + '">' + monthNames[i] + '</td>';
}
$('tr#months').html(months);

var numbers = '';
var counter = 1;
var month = 0;
for (i = 0; i < 365; i++) {
    numbers += '<td>' + counter + '</td>';
    counter++;
    if (counter > monthDays[month]) {
        month++;
        counter = 1;
    }
}
$('tr#numbers').html(numbers);

var days = '';
var day = 0;
for (i = 0; i < 365; i++) {
    days += '<td' + (dayNames[day] == 'Sa' || dayNames[day] == 'Sn' ? ' class="weekend"' : '') + '>' + dayNames[day] + '</td>';
    day++;
    if (day > 6) day = 0;
}
$('tr#days').html(days);

此外我希望它尽可能快，因为如果由于某种原因我需要很长的时间（4年），我希望它能够快速渲染（即使在IE8上）。

关于如何使这项工作的任何建议都会有所帮助。我查看了jQuery UI datepicker代码，但它很复杂，并且具有我不需要的所有功能。

Answer 1

我肯定会使用内置日期函数的javascript。你可以做（不完美，但很快写了一些有用的东西）：

var weekday=["Su", "Mo","Tu","We","Th","Fr","Sa"];
var months=["Jan", "Feb","Mar","Apr","May","Jun","Jul", "Aug","Sep","Oct","Nov","Dec"];
var start = new Date(2013,0,15); //months start at 0...
var end = new Date(2013,01,10);
var month = {};
var row1 = "<tr>";
var row2 = "<tr>";
var row3 = "<tr>";
for (start; start<end; start.setDate(start.getDate()+1)) {
    row2 += '<td>' + start.getDate() + '</td>';
    row3 += '<td>' + weekday[start.getDay()] + '</td>';
    month[months[start.getMonth()]] = typeof(month[months[start.getMonth()]])=="undefined"?1:month[months[start.getMonth()]]+1;
}
for (i=0; i<months.length; i++) {
    if (typeof(month[months[i]]) !== "undefined") {
       row1 += "<td colspan="+month[months[i]]+">"+months[i]+"</td>";
    }
}
row1 += "</tr>";
row2 += "</tr>";
row3 += "</tr>";
table = "<table>" + row1+row2+row3 + "</table>";

Answer 2

这是我的最终解决方案：

var weekday = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

function renderHead(div, start, end) {
    var c_year = start.getFullYear();
    var r_year = "<tr>";
    var daysInYear = 0;

    var c_month = start.getMonth();
    var r_month = "<tr>";
    var daysInMonth = 0;

    var r_days = "<tr>";
    var r_days2 = "<tr>";
    for (start; start <= end; start.setDate(start.getDate() + 1)) {

        if (start.getFullYear() !== c_year) {
            r_year += '<td colspan="' + daysInYear + '">' + c_year + '</td>';
            c_year = start.getFullYear();
            daysInYear = 0;
        }
        daysInYear++;

        if (start.getMonth() !== c_month) {
            r_month += '<td colspan="' + daysInMonth + '">' + months[c_month] + '</td>';
            c_month = start.getMonth();
            daysInMonth = 0;
        }
        daysInMonth++;

        r_days += '<td>' + start.getDate() + '</td>';
        r_days2 += '<td>' + weekday[start.getDay()] + '</td>';
    }
    r_days += "</tr>";
    r_days2 += "</tr>";
    r_year += '<td colspan="' + (daysInYear) + '">' + c_year + '</td>';
    r_year += "</tr>";
    r_month += '<td colspan="' + (daysInMonth) + '">' + months[c_month] + '</td>';
    r_month += "</tr>";
    table = "<table>" + r_year + r_month + r_days + r_days2 + "</table>";

    div.html(table);
}

这是工作演示：http://jsfiddle.net/Misiu/sBCbC/10/

在表头中绘制日历

2 个答案: