.hy_tit{
height:2.5em;
line-height:2.5em;
background:#3598db;
color:#fff;
font-size:26px;
text-align:center;}
.hy_tit div{
cursor:pointer;}
.titL,.titR{
width:10%;
height:100%;
float:left;
padding:0;}
.titL:hover,.titR:hover{
background:#46a9ec;}
.titR{
float:right;
text-align:right;}
.titL a,.titR a{
display: block;
text-decoration:none;
color:#fff}
/*
example:
var dateSelectObj = new wxCalendar();
dateSelectObj.maxMonth = 6; // 最多显示几个月的日历,默认是3
dateSelectObj.startDate = "2015-06-28"; // 从哪天开始显示,从哪天开始可以可选,不填默认为今天
dateSelectObj.initObj(document.getElementById("start_day"), document.getElementById("start_date_show"));
*/
var _tmpWxCalendar = [];
function wxCalendar()
{
this.maxMonth = 3;
this.startDate = "";
this.inputObj = null; // 保存选择结果
this.showObj = null; // 控件显示按钮,如果showInObj没有值,则结果显示在这个div中
this.showInObj = null; // 选择结果显示div
this.calendarObjId = "";
this.divObj = null;
this.scrollObj = null;
this.lastSelectObj = null; // 当前被选中的TD
this.lastCssText = ""; // 上次选中的TD的css
this.initFirst = true;
this._dateArray = [];
this._dateObjArray = [];
this.hideDiv = function()
{
this.divObj.style.display = "none";
}
this.showDiv = function()
{
this.divObj.style.display = "";
}
this.onSelectFunc = function()
{
//
}
this.initObj = function(inputObj, showObj)
{
this.calendarObjId = "calendarObjId_" +
Math.floor(Math.random()*100000).toString() + "_" +
Math.floor(Math.random()*100000).toString() + "_" +
Math.floor(Math.random()*100000).toString();
_tmpWxCalendar[ this.calendarObjId ] = this;
this.inputObj = inputObj;
this.showObj = showObj;
this.showObj.name = this.calendarObjId;
this.showObj.onclick = function(){ _tmpWxCalendar[ this.name ].showDiv(); };
if(this.showInObj == null)
this.showInObj = this.showObj;
this.divObj = document.createElement("div");
this.divObj.style.cssText = "background:white;position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden; z-index:99;";
var bs = document.getElementsByTagName("body");
bs[0].appendChild(this.divObj);
this.divObj.innerHTML = '<div style="background:#f5f4f1;position:fixed;top:0;left:0;width:100%;text-align:center;z-index:99;" id="calendarTop">' +
'<div class="hy_tit" id="calendarTitle">' +
'<div class="titL">' +
'<a href="" οnclick="_tmpWxCalendar[\'' + this.calendarObjId + '\'].hideDiv();return false;"><</a>' +
'</div>' +
'<div class="titR"></div>' +
'选择日期' +
'</div>' +
'<table cellpadding="0" cellspacing="0" width="91%" style="margin:0 4.5%; line-height:2.5em">' +
'<tr>' +
'<td align="center" style="color:#ff6600">日</td>' +
'<td align="center">一</td>' +
'<td align="center">二</td>' +
'<td align="center">三</td>' +
'<td align="center">四</td>' +
'<td align="center">五</td>' +
'<td align="center" style="color:#ff6600">六</td>' +
'</tr>' +
'</table>'
'</div>';
// 只为校正一下title的位置
var titleObj = document.getElementById("calendarTitle");
//titleObj.style.lineHeight = titleObj.offsetHeight + "px";
this.scrollObj = document.createElement("div");
this.scrollObj.style.cssText = 'overflow-y:scroll;overflow-x:hidden;width:100%;height:100%';
this.divObj.appendChild(this.scrollObj);
this._todayDate = getTodayDate();
if(this.startDate == "")
this.startDate = this._todayDate;
this.getDataArray();
for(var index = 0; index < this._dateArray.length; index++)
{
if(this._dateArray[index] != null)
{
var tableObj = document.createElement("table");
tableObj.setAttribute('cellpadding', 0);
tableObj.setAttribute('cellspacing', 0);
tableObj.setAttribute('width', "91%");
tableObj.setAttribute('height', "50%");
if(index == 0)
tableObj.style.margin = document.getElementById("calendarTop").offsetHeight + 20 + "px 4.5% 0 4.5%";
else
tableObj.style.margin = "20px 4.5% 0 4.5%";
this.scrollObj.appendChild(tableObj);
//tableObj.setAttribute('width', titleObj.offsetWidth + "px");
var _staticSize = tableObj.offsetWidth * 0.14 * 0.8;
for(var i = 0; i < this._dateArray[index].length; i++)
{
var trObj = tableObj.insertRow(i);
if(i == 0){
var tdObj = trObj.insertCell(0);
tdObj.setAttribute("colspan", 7);
tdObj.setAttribute("height", "10%");
tdObj.setAttribute("align", "center");
tdObj.style.fontSize = "1.1em";
tdObj.innerHTML = '<strong>' + this._dateArray[index][i] + '</strong>';
trObj.appendChild(tdObj);
}else{
for(var j = 0; j < this._dateArray[index][i].length; j++)
{
var tdObj = trObj.insertCell(j);
var dateStr = this._dateArray[index][i][j] != 0?this._dateArray[index][i][j]["title"]:" ";
var _fontCssText = "";
if(dateStr != " ")
{
var _dateFlag = timeCompare(this.startDate, this._dateArray[index][i][j]["key"]);
if(_dateFlag < 0)
{
_fontCssText = 'color:#ccc;';
}else{
if(j == 0 || j == 6)
{
_fontCssText = 'color:#ff6600;';
}
}
var _tmpStr = "";
var _todayFlag = timeCompare(this._todayDate, this._dateArray[index][i][j]["key"]);
switch(_todayFlag)
{
case 0:
_tmpStr = "今天";
break;
/*case 1:
_tmpStr = "明天";
break;
case 2:
_tmpStr = "后天";
break;*/
default:
break;
}
tdObj.setAttribute("align", "center");
tdObj.setAttribute("width", "14%");
tdObj.setAttribute("height", "18%");
tdObj.style.cssText = "line-height:1.5em;" + _fontCssText;
//tdObj.innerHTML = '<div style="height:' + _staticSize + 'px;line-height:' + _staticSize + 'px;text-align:center">' + dateStr + '<span style="font-size:0.5em;">'+ _tmpStr +'</span></div>';
if(_tmpStr != "")
dateStr = _tmpStr;
//tdObj.innerHTML = '<div style="width:' + _staticSize + 'px;height:' + _staticSize + 'px;line-height:' + _staticSize + 'px;text-align:center">' + dateStr + '</div>';
var _dateObj = document.createElement("div");
_dateObj.style.cssText = "width:" + _staticSize + "px;height:" + _staticSize + "px;line-height:" + _staticSize + "px;text-align:center";
_dateObj.innerHTML = dateStr;
_dateObj.setAttribute("_val", this._dateArray[index][i][j]["key"]);
_dateObj.name = this.calendarObjId;
tdObj.appendChild(_dateObj);
if(_dateFlag >= 0 )
_dateObj.onclick = function(){ _tmpWxCalendar[ this.name ].selectData( this.getAttribute('_val') ); }
this._dateObjArray[ this._dateArray[index][i][j]["key"] ] = _dateObj;
}else{
tdObj.setAttribute("align", "center");
tdObj.setAttribute("width", "14%");
tdObj.setAttribute("height", "18%");
tdObj.innerHTML = dateStr;
}
}
}
}
}
}
this.selectData();
this.divObj.style.display = "none";
}
this.getDataArray = function()
{
var dateOB = null;
//if(this.startDate != "")
// dateOB = new Date(this.startDate);
//else
dateOB = new Date();
var year = dateOB.getFullYear();
var month = dateOB.getMonth() + 1;
var date = dateOB.getDate();
if(this.startDate == "")
this.startDate = year + "-" + month + "-" + date;
for(var index = 0; index < this.maxMonth; index++)
{
if(index > 0)
month++;
if(month > 12)
{
year++;
month = 1;
}
var beginIndex = new Date(year + '/' + month + '/1').getDay();
var tmpDateOB = new Date(year, month, 0);
var dateCount = tmpDateOB.getDate();
var dateArray = [];
var _dateIndex = 1;
var maxRow = parseInt(dateCount / 6);
switch(dateCount)
{
case 31:
if(beginIndex >= 5)
maxRow++;
break;
case 30:
if(beginIndex >= 6)
maxRow++;
break;
case 29:
maxRow++;
break;
case 28:
if(beginIndex > 0)
maxRow++;
break;
default:
break;
}
for(var i = 0; i <= maxRow; i++)
{
dateArray[i] = [];
if(i == 0)
{
dateArray[i] = year + "年" + month + "月";
}else{
for(var j = 0; j < 7; j++)
{
if(beginIndex == j + (i - 1) * 7 && _dateIndex <= dateCount)
{
var dateStr = _dateIndex < 10?"0" + _dateIndex:_dateIndex;
var monthStr = month < 10?"0" + month:month;
var keyStr = year + "-" + monthStr + "-" + dateStr;
dateArray[i][j] = {"key":keyStr, "title":dateStr};
beginIndex++;
_dateIndex++;
}else{
dateArray[i][j] = 0;
}
}
}
}
this._dateArray.push(dateArray);
}
}
this.selectData = function(inputDate)
{
if(inputDate == null)
{
if(this.inputObj.value != "")
inputDate = this.inputObj.value;
else
inputDate = this.startDate;
}
inputDate = timeCompare(this._todayDate, inputDate) > 0?inputDate:this._todayDate;
if(this.lastCssText != "" && this.lastSelectObj != null)
this.lastSelectObj.style.cssText = this.lastCssText;
var _dateObj = this._dateObjArray[inputDate];
this.lastCssText = _dateObj.style.cssText;
_dateObj.style.color = "white";
_dateObj.style.background = "#ff6600";
_dateObj.style.lineHeight = _dateObj.offsetHeight + "px";
_dateObj.style.borderRadius = "50%";
//_dateObj.style.cssText += "color:white;background:#ff6600;line-height:1em;border-radius:50%;";
var _date = _dateObj.getAttribute("_val");
var _tmpStr = "";
var _todayFlag = timeCompare(this._todayDate, _date);
if(_todayFlag > 0)
{
this._dateObjArray[this._todayDate].innerHTML = "今天";
}
else if(_todayFlag == 0)
{
this._dateObjArray[this._todayDate].innerHTML = this._todayDate.substr(-2);
}
this.lastSelectObj = _dateObj;
if(this.initFirst == true)
{
this.initFirst = false;
if(this.inputObj.value != "")
{
this.inputObj.value = _date;
if(this.showInObj.tagName == "INPUT")
this.showInObj.value = _date;
else
this.showInObj.innerHTML = _date;
}
return;
}
this.inputObj.value = _date;
if(this.showInObj.tagName == "INPUT")
this.showInObj.value = _date;
else
this.showInObj.innerHTML = _date;
this.hideDiv();
this.onSelectFunc();
}
}
function getTodayDate()
{
var val = new Date();
var year = val.getFullYear();
var month = val.getMonth()+1;
var date = val.getDate();
month = month < 10?"0" + month:month;
date = date < 10?"0" + date:date;
return year + "-" + month + "-" + date;
}
function timeCompare(d1,d2)
{
var date1 = d1.split("-");
var date2 = d2.split("-");
var date_1,date_2;
if(date1[0]<1970 || date2[0]<1970)
{return;}
date_1 = date1[0]+"/"+date1[1]+"/"+date1[2];
date_2 = date2[0]+"/"+date2[1]+"/"+date2[2];
var val = (Date.parse(date_2)-Date.parse(date_1))/1000/60/60/24;
return val;
}