问题：

Question

我有一个用Javascript生成的年份日历，它将每个月作为一行呈现，水平地呈现为一组表格。根据获取当前serverTime动态设置第一个月。每张桌子都是一个月。表格是：

<table id="m1"></table>
<table id="m2"></table>
<table id="m3"></table>
<table id="m4"></table>
<table id="m5"></table>
<table id="m6"></table>
<table id="m7"></table>
<table id="m8"></table>
<table id="m9"></table>
<table id="m10"></table>
<table id="m11"></table>
<table id="m12"></table>
<table id="m13"></table>
<table id="m14"></table>

在DOM注入后，每个月都会填充id。 10月'13的例子=

<table id="m2">
<tbody><tr><td>Oct 13</td>
<td></td><td></td>
<td class="avail" id="10_1_13">1</td>
<td class="avail" id="10_2_13">2</td>
<td class="avail" id="10_3_13">3</td>
<td class="avail" id="10_4_13">4</td>
<td class="avail" id="10_5_13">5</td>
<td class="avail" id="10_6_13">6</td>
<td class="avail" id="10_7_13">7</td>
<td class="avail" id="10_8_13">8</td><td class="avail" id="10_9_13">9</td><td class="avail" id="10_10_13">10</td><td class="avail" id="10_11_13">11</td><td class="avail" id="10_12_13">12</td><td class="avail" id="10_13_13">13</td><td class="avail" id="10_14_13">14</td><td class="avail" id="10_15_13">15</td><td class="avail" id="10_16_13">16</td><td class="avail" id="10_17_13">17</td><td class="avail" id="10_18_13">18</td><td class="avail" id="10_19_13">19</td><td class="avail" id="10_20_13">20</td><td class="avail" id="10_21_13">21</td><td class="avail" id="10_22_13">22</td><td class="avail" id="10_23_13">23</td><td class="avail" id="10_24_13">24</td><td class="avail" id="10_25_13">25</td><td class="avail" id="10_26_13">26</td><td class="avail" id="10_27_13">27</td><td class="avail" id="10_28_13">28</td><td class="avail" id="10_29_13">29</td><td class="avail" id="10_30_13">30</td><td class="avail" id="10_31_13">31</td><td></td><td></td><td></td><td></td></tr></tbody></table>

我有一个javascript函数“ showBookingData（data）”，它接收来自服务器的两个日期（startDate + endDate）进行预订，我将其传递给渲染函数“ highlightBookTableMonthsChange（start），结束）“在日历上显示与开始日期和结束日期匹配的彩色预订期间。

此渲染函数计算日期的差异，以便它可以AddClass到预订的每一天以显示阻止期间，并突出显示相关表格。

渲染函数接收以下JSON =

中的日期

{"d":[{"__type":"booking+PropDates","dataValueField":"02/19/14","dataValueField2":"02/26/14"}]}

问题：

我的渲染功能'highlightBookTableMonthsChange（开始，结束）'正确接收日期，但似乎从这一点开始计算不同的输出日期，从1900年代早期到2100年代早期，在接下来的六个月中进行预订 - 取决于时间客户端计算机的格式!!!因此，我需要在某个地方绑定一种格式，以避免我认为客户端代码中正在进行的某种假设日期计算。

Javascript函数：

function showBookingData(data) {
    var len = data.d.length;
    var i = 0;
    for (i = 0; i < len; i++) {
        var sptype = data.d[i].__type;
        var startDate = data.d[i].dataValueField;
        var endDate = data.d[i].dataValueField2;
//        alert("{'startdate':" + startDate + ",'enddate':'" + endDate + "'}")
        highlightBookTableMonthsChange(startDate, endDate)
    }
}

function highlightBookTableMonthsChange(start, end) {

    var start = new Date(start);
    var end = new Date(end);
    alert("{'startdate':" + start + ",'enddate':'" + end + "'}")
    var i = 1;
    $("#datesd").html($("#datesd").html()+'<br/>'+start + "" + end);
    var timeDiff = Math.abs(end.getTime() - start.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    diffDays++;
    while (start <= end) {
        var startMonth = start.getMonth() + 1;
        var startDate = start.getDate();
        var year = start.getFullYear();
        if (i == 1) {
            var prevClass = $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class");
            if (prevClass == "lastBook" || prevClass == "fullBook")
            { $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "fullBook"); }
            else
                $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "firstBook");
        }
        else if (i == diffDays) {
            $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "lastBook");
        }
        else {
            $("#" + parseInt(startMonth) + "_" + startDate + "_" + year).attr("class", "fullBook");
        }
        var newDate = start.setDate(start.getDate() + 1);
        start = new Date(newDate);
        i=i+1;
    }
}

function createYearCalander() {
    var i = 1;
    var startDates = new Date(calanderStartDate);
    var startMonth = startDates.getMonth();
    var startYear = startDates.getFullYear();
    if (country = "US") {
        startDatee = startMonth + "/1/" + startYear;
    }
    else {
        startDatee = "1/" + startMonth + "/" + startYear;
    }
    startMonth++;
    for (i = 1; i <= 12; i++) {  //Number of Months on Grid
        createMonthTable(i, startMonth, startYear);
        if (startMonth == 12) {
            startMonth = 1;
            startYear++;
        }
        else
            startMonth++;
    }

    gerData(1); //Get Booking Date Data From Server
}

function createMonthTable(monthCount,mth,year) {
    var table1 = document.getElementById('m' + monthCount);
    var tblRow = tblRow = table1.insertRow(0);
    var tblCell = null;
    var dayys = countDaysOfMonth(mth, year);
    var startDates = new Date(mth + "/1/" + year)
    var firstDayOfMth = startDates.getDay();  //first day of month
    var dataStarts = firstDayOfMth;
    var dataEnds = firstDayOfMth + dayys;
    var i = 0;
    var tempDayStart = 1;
    for (i = 0; i <= 37; i++) {
        tblCell = tblRow.insertCell(i);
        if (i == 0) {
            tblCell.innerHTML = monthName(mth) + "," + year;
        }
        else if (i > dataStarts && i <= dataEnds) {
             $(tblCell).attr("class", "avail")
             tblCell.id = mth + "_" + tempDayStart + "_" + year;
            tblCell.innerHTML = tempDayStart;
            tempDayStart = tempDayStart + 1;
        }

    }
    if (monthCount == 12) {  //Months displayed on table grid
        endDatee = mth + "/" + dayys + "/" + year;
    }
}


function countDaysOfMonth(m,y)
{
    return (/8|3|5|10/.test(--m) ? 30 : m == 1 ? (!(y % 4) && y % 100) || !(y % 400) ? 29 : 28 : 31);
} 


function monthName(month)
{
    if (month == 1) 
        return 'Jan'
    else if (month == 2)
        return 'Fab'
    else if (month == 3)
        return 'Mar'
    else if (month == 4)
        return 'Apr'
    else if (month == 5)
        return 'May'
    else if (month == 6)
        return 'Jun'
    else if (month == 7)
        return 'Jul'
    else if (month == 8)
        return 'Aug'
    else if (month == 9)
        return 'Sep'
    else if (month == 10)
        return 'Oct'
    else if (month == 11)
        return 'Nov'
    else if (month == 12)
        return 'Dec'
}
function getServerTime() {
    $.ajax({
        type: "POST",
        //data: "{'propId':" + programId + "}",
        url: "svcs/booking.asmx/getServerDate",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            calanderStartDate = data.d;
            createYearCalander();
            SetPrpCal();
        },
        error: OnError
    });
}

function gerData(programId) {
    Zzp = ($.super_cookie().read_value("propRz1", "zc"));
    $.ajax({
        type: "POST",
        data: "{'cp':" + Zzp + ",'fDate':'" + startDatee + "','tDate':'" + endDatee + "'}",
        url: "svcs/booking.asmx/getPropertyBookings",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            showBookingData(data)
        },
        error: OnError
    });
}

Answer 1

我意识到这并没有回答你的问题，但是当你已经有很多可以重复使用时，你有什么理由推翻自己的日历功能吗？日期/时间可能会变得棘手。

如果您需要自己动手，请查看http://momentjs.com/。它允许您执行诸如获取两个日期之间的＃天数之类的事情，并且您还可以在任何日期添加一天。

所以你可以做一些像（伪代码而不看库）的事情：

newDate = startDate;
While ((newDate = newDate.addDay(1)) < endDate) {
    // highlight on calendar
}

Answer 2

我通过进一步测试找到了答案：

我想在左侧日期列中显示短格式年份以保持宽度下降，但是通过使用短日期格式，某些客户端系统使用19 **和短期计算日期格式年。

所以我将输出JSON流从服务器更改为日期格式（MM / dd / yyyyy）以强制全年。这也会自动将表格中的日期ID从“10_1_13”格式更改为2013年10月1日的“10_1_2013”，并准确处理表格中的预订。但在第一个月的专栏中也提供了一整年。所以为了纠正这个问题，我在函数createMonthTable（monthCount，mth，year）中修剪了日期格式。所以新功能看起来像这样：

function createMonthTable(monthCount, mth, year) {
    var startYearShort = (year + '').substring(2, 4); //convert 2digit yy
    var table1 = document.getElementById('m' + monthCount);
    var tblRow = tblRow = table1.insertRow(0);
    var tblCell = null;
    var dayys = countDaysOfMonth(mth, year);
    var startDates = new Date(mth + "/1/" + year)
    var firstDayOfMth = startDates.getDay();  //first day of month
    var dataStarts = firstDayOfMth;
    var dataEnds = firstDayOfMth + dayys;
    var i = 0;
    var tempDayStart = 1;
    for (i = 0; i <= 37; i++) {
        tblCell = tblRow.insertCell(i);
        if (i == 0) {
            tblCell.innerHTML = monthName(mth) + " " + startYearShort;
        }
        else if (i > dataStarts && i <= dataEnds) {
            $(tblCell).attr("class", "avail")
            tblCell.id = mth + "_" + tempDayStart + "_" + year;
            tblCell.innerHTML = tempDayStart;
            tempDayStart = tempDayStart + 1;
        }

    }
    if (monthCount == 14) { //depends on table rows for #months
        endDatee = mth + "/" + dayys + "/" + year; 
    //I Send startDatee & endDatee values as an AJAX GET to the server so that I get
    //returned a date array matching the calendar months grid only.
    }
}

这现在完美无缺！见输出

任何寻找客户端灵活动态月份水平日历的人，通过JSON接收预订期。这是一个使用一点CSS轻松设计的快速模型。如果有人想要一个css文件 - 然后给我发消息，我将发送一个。

JavaScript渲染逻辑：水平动态预订日历

问题：

Javascript函数：

2 个答案: