//預訂態勢圖JS//根據日期得到對應星期幾 function getWeekByDay(riqi){//'2017-01-23';var getWeek = "";var arys1= new Array(); arys1=riqi.split('-'); //日期為輸入日期，格式為 2013-3-10var ssdate=new Date(arys1[0],parseInt(arys1[1]-1),arys1[2]); getWeek = ssdate.getDay(); //得到星期幾if(getWeek == 1){getWeek = "周一";}else if(getWeek == 2){getWeek = "周二";}else if(getWeek == 3){getWeek = "周三";}else if(getWeek == 4){getWeek = "周四";}else if(getWeek == 5){getWeek = "周五";}else if(getWeek == 6){getWeek = "周六*";}else if(getWeek == 0){getWeek = "周日*";}return getWeek; };//日期加上天數得到新的日期 //dateTemp 需要參加計算的日期，days要添加的天數，返回新的日期，日期格式：YYYY-MM-DD function getNewDayAndWeek(dateTemp, days) { var dateTemp = dateTemp.split("-"); var nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]); //轉換為MM-DD-YYYY格式 var arrDay = new Array();var arrWeek = new Array();var dataAll = {};var data = "";var weekInfo = "";for(var i=0;i<days;i++){var millSeconds = Math.abs(nDate) + (i * 24 * 60 * 60 * 1000); var rDate = new Date(millSeconds); var year = rDate.getFullYear(); var month = rDate.getMonth() + 1; if (month < 10) month = "0" + month; var date = rDate.getDate(); if (date < 10) date = "0" + date;data = year + "-" + month + "-" + date; weekInfo = getWeekByDay(data);arrDay.push(data);arrWeek.push(weekInfo);}dataAll.arrDay = JSON.stringify(arrDay);dataAll.arrWeek = JSON.stringify(arrWeek);return dataAll; }; //titleDay = JSON.parse(getNewDayAndWeek('2017-01-18',14).arrDay);//日期 //$('div[class$="882"] :not(.datagrid-sort-icon)').html('需要顯示的新標題');//搜索按鈕 $('#searchbydatetime_scheduledDiagram').click(function(){var dateValue = $('#datetime_startScheduledDiagram').datebox('getValue');console.info(dateValue);if(dateValue == ""){$.messager.show({title:'系統提示',msg:'請輸入查詢時間！',timeout:2000,showType:'slide'});return;}$('#tab_scheduledDiagram').remove();var tab1 = '<table id="tab_scheduledDiagram" style="width:98%;margin-left:8px;"></table>';var div = $('#tabParent_div').append(tab1);var tab = $('#tab_scheduledDiagram');var obj = $.ajax({type:"post",url:"../reserve/reserveSituation",data:{date:new Date(dateValue),dateRange:14},async:false,dataType:"json"});var startTime = $('#datetime_startScheduledDiagram').datebox('getValue');tab.append('<ul style="float:left;width:6.5%;height:30px;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;text-align:right:">'+ '<li style="float: left;width:28%;height:30px;line-height: 30px;border-left:1px solid black;text-align:center;">'+ '</li>'+ '<li style="float: left;width:69%;height:30px;line-height: 30px;text-align:right;">'+ '日期</li>'+ '</ul>');$.each((JSON.parse(getNewDayAndWeek(startTime,14).arrDay)),function(i,item){var ul = '';ul += '<ul style="float:left;width:6.5%;height:30px;line-height: 30px;border-top:1px solid black;border-bottom:1px solid black;border-right:1px solid black;">';ul += '<li style="float: left;width:100%;height:30px;line-height: 30px;text-align:center;">'+ item+'</li>';//eq:1ul += '</ul>';tab.append(ul);});tab.append('<ul style="float:left;width:6.5%;height:30px;border-right:1px solid black;border-bottom:1px solid black;text-align:right:">'+ '<li style="float: left;width:60%;height:30px;line-height: 30px;border-left:1px solid black;text-align:center;">'+ '房型</li>'+ '<li style="float: left;width:37%;height:30px;line-height: 30px;text-align:center;">'+ '</li>'+ '</ul>');$.each((JSON.parse(getNewDayAndWeek(startTime,14).arrWeek)),function(i,item){var ul1 = '';ul1 += '<ul style="float:left;width:6.5%;height:30px;line-height: 30px;border-right:1px solid black;border-bottom:1px solid black;">';ul1 += '<li style="float: left;width:100%;height:30px;line-height: 30px;text-align:center;">'+ item+'</li>';//eq:1ul1 += '</ul>';tab.append(ul1);});for(var i=0;i<obj.responseJSON.length;i++){tab.append('<ul style="float:left;width:6.5%;height:75px;border-bottom:1px solid black;border-right:1px solid black;text-align:right:">'+ '<li style="float: left;width:28%;height:75px;line-height: 24px;text-align:center;border-right:1px solid black;border-left:1px solid black;">'+ obj.responseJSON[i].roomtypeName+ '</li>'+ '<li style="float: left;width:66%;height:75px;line-height: 24px;text-align:center;">'+ '在住<br>可訂<br>已訂</li>'+ '</ul>');for(var j=0;j<obj.responseJSON[i].availableList.length;j++){var ul3 = '';ul3 += '<ul style="float:left;width:6.5%;height:75px;line-height: 75px;border-bottom:1px solid black;border-right:1px solid black;">';ul3 += '<li style="float: left;width:100%;height:24px;line-height: 24px;text-align:center;">'+ obj.responseJSON[i].stayList[j]+'</li>';//eq:1ul3 += '<li style="float: left;width:100%;height:24px;line-height: 24px;text-align:center;">'+ obj.responseJSON[i].availableList[j]+'</li>';//eq:1ul3 += '<li style="float: left;width:100%;height:24px;line-height: 24px;text-align:center;">'+ obj.responseJSON[i].reserveList[j]+'</li>';//eq:1ul3 += '</ul>';tab.append(ul3);if(j==obj.responseJSON[i].availableList.length){}}//console.info(obj.responseJSON[i].reserveList);//console.info(obj.responseJSON[i].stayList);//console.info(obj.responseJSON[i].roomtypeName);//console.info(obj.responseJSON[i].roomtypeId); } });

效果圖：

轉載于:https://www.cnblogs.com/ryans/p/6559095.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的预订态势图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。