JavaScript渲染邏輯：水平動態預訂日歷

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。 '13年10月的示例=

<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，end） ”，以在日歷上顯示彩色的預定期。與開始日期和結束日期匹配。

此渲染函數計算日期差異，以便可以在預訂的每一天中添加Class，以顯示阻塞的時間段，並突出顯示相關表。

render函數在以下JSON =中接收日期

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

問題：

我的Render函數'highlightBookTableMonthsChange（start，end）'正確接收了日期，但似乎從這一點開始計算了不同的輸出日期，從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文件-請給我發消息，我將發送一個。