在表头中绘制日历

Question

我正在尝试绘制有 3 行的表格。 第一行应该有月份名称，第二个 - 月份的天数和一周的第三天。 像这样的东西：

我设法做了一些看起来像这样的事情，但仅限于 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 日期选择器代码，但它很复杂并且具有我不需要的所有功能。

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/

Answer 3

采用 Misiu 的代码（在 2013 年回答，这里是他的工作示例链接：http://jsfiddle.net/Misiu/sBCbC/10/）这是我的解决方案，添加来自 Bootstrap5 的表 (css) 类和 JSTL 国际化字符串的月份和日期。

我传递了一个日期（使用 tarea.getFechaInicio f.E.，存储在 MySQL 中），而不是在 renderHead() 方法上手动提供“新日期”的 3 个参数。

 <script type="application/javascript">
    var weekday = [
        "<fmt:message key="dia.domingo" />",
        "<fmt:message key="dia.lunes" />",
        "<fmt:message key="dia.martes" />",
        "<fmt:message key="dia.miercoles" />",
        "<fmt:message key="dia.jueves" />",
        "<fmt:message key="dia.viernes" />",
        "<fmt:message key="dia.sabado" />",
        ];
    var months = [
        "<fmt:message key="mes.enero" />",
        "<fmt:message key="mes.febrero" />",
        "<fmt:message key="mes.marzo" />",
        "<fmt:message key="mes.abril" />",
        "<fmt:message key="mes.mayo" />",
        "<fmt:message key="mes.junio" />",
        "<fmt:message key="mes.julio" />",
        "<fmt:message key="mes.agosto" />",
        "<fmt:message key="mes.septiembre" />",
        "<fmt:message key="mes.octubre" />",
        "<fmt:message key="mes.noviembre" />",
        "<fmt:message key="mes.Diciembre" />"
    ];


    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  class='table table-bordered table-responsive table-striped text-center>'" + r_year + r_month + r_days + r_days2 + "</table>";

        div.html(table);
    }
  //  renderHead($('div#table1'), new Date(2013, 0, 20), new Date(2015, 1, 5));
    renderHead($('div#table1'), new Date('<%=tarea.getFechaInicio()%>'),new Date('<%=tarea.getFechaFin()%>') );