JavaScript呈现逻辑:水平动态预订日历
我有一个用Javascript生成的日历,它将每个月显示为一行,水平显示为一组表。根据获取当前服务器时间动态设置第一个月。每张桌子是一个月。各表如下:JavaScript呈现逻辑:水平动态预订日历,javascript,jquery,ajax,date,calendar,Javascript,Jquery,Ajax,Date,Calendar,我有一个用Javascript生成的日历,它将每个月显示为一行,水平显示为一组表。根据获取当前服务器时间动态设置第一个月。每张桌子是一个月。各表如下: <table id="m1"></table> <table id="m2"></table> <table id="m3"></table> <table id="m4"></table> <table id="m5"></tabl
<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>
问题是:
我的渲染函数“HighlightBookTableMonthChange(开始,结束)”正确地接收日期,但似乎从这一点开始计算不同的输出日期,从20世纪初到21世纪初,在未来六个月内进行预订,这取决于客户端计算机的时间格式!!!所以我需要在某个地方绑定一种格式,以避免我认为在客户端代码中进行的某种假定日期计算
Javascript函数:
函数showBookingData(数据){
var len=数据d.长度;
var i=0;
对于(i=0;i “+start+”+end);
var timeDiff=Math.abs(end.getTime()-start.getTime());
var diffDays=数学单元(timeDiff/(1000*3600*24));
diffDays++;
虽然(开始我意识到这并没有回答你的问题,但是当有大量的日历功能可以重复使用时,你为什么要使用自己的日历功能?日期/时间可能会变得棘手
如果你必须自己动手,那就去看看吧。它可以让你在两个日期之间获得#天的间隔,你还可以在任何日期上加上一天
因此,您可以执行以下操作(不查看库的伪代码):
newDate=startDate;
而((newDate=newDate.addDay(1))
我通过进一步测试找到了答案:
我想在左侧的日期列中显示short格式年份,以保持较低的宽度,但通过使用short-date格式,一些客户端系统使用19**和short-date格式年份来计算日期
因此,我将服务器的输出JSON流更改为日期格式(MM/dd/yyyyy)以强制全年。这也会自动将表中的日期ID从“10_1_13”格式更改为“10_1_2013”由于从2013年10月1日开始,我准确地处理了表上的预订。但在第一个月列中也显示了一整年。因此,为了纠正这一点,我在函数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.
}
}
函数createMonthTable(月、月、年){
var startYearShort=(年份+“”)。子字符串(2,4);//转换为2digit yy
var table1=document.getElementById('m'+monthCount);
var tblRow=tblRow=table1.insertRow(0);
var-tblCell=null;
var dayys=countDaysOfMonth(月,年);
var startDates=新日期(mth+“/1/”+年)
var firstDayOfMth=startDates.getDay();//月的第一天
var dataStarts=每月的第一天;
var dataEnds=第1天的月日+月日;
var i=0;
var tempDayStart=1;
对于(i=0;i dataStarts&&i感谢您加入pfrank:)在这种情况下,滚动我自己的纯客户端是因为它每天会在前端呈现数万次,并附带有关预订的特定信息,也可以通过鼠标悬停事件查看。我不想拼凑第三方产品并努力将其转换为我的需要。您能告诉我您的最新版本吗请问是html+js的版本吗?
{"d":[{"__type":"booking+PropDates","dataValueField":"02/19/14","dataValueField2":"02/26/14"}]}
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
});
}
newDate = startDate;
While ((newDate = newDate.addDay(1)) < endDate) {
// highlight on calendar
}
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.
}
}