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

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

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

 
 
Oct 13
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

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

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

render函数接收以下JSON =中的日期

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

问题：

我的渲染function’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()+'
'+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  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

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

如果您需要自己动手，请访问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文件 - 然后给我发消息，我将发送一个。