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; }
相关文章推荐
- Js 实现图片放大功能
- JavaScript高级程序设计之面向对象的程序设计之继承之寄生式继承第6.3.5讲笔记
- JavaScript多图片上传案例
- 转载:(个人学习用)JSP文件过大编译失败,异常如is exceeding the 65535 bytes l...
- JSON数组操作
- JavaScript高级程序设计之面向对象的程序设计之继承之原型式继承第6.3.4讲笔记
- JavaScript高级程序设计之面向对象的程序设计之继承之组合继承第6.3.3讲笔记
- (三)我的JavaScript系列:不同调用方式的this指向
- JavaScript判断FileUpload控件上传文件类型
- JavaScript高级程序设计之面向对象的程序设计之继承之借用构造函数第6.3.2讲笔记
- 国内使用Google Maps JavaScript API
- 国内使用Google Maps JavaScript API
- 国内使用Google Maps JavaScript API
- 国内使用Google Maps JavaScript API
- js 读取 地址栏参数 转
- jsp四大作用域
- JavaScript中的this学习笔记
- 属性特性的默认值辨析
- JavaScript中闭包的学习笔记
- JavaScript中作用域的学习笔记