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

.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;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值