您的位置:首页 > Web前端 > JavaScript

JS写的一个日期选择控件(移动网页的),写得不当的地方,望各位大神指正

2015-09-28 15:11 786 查看
.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=""  onclick="_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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: