/** * add auto hide when mouse moveout * * @version 1.0.1 * @date 2010-11-23 * @author coraldane@gmail.com */ /** * Date Picker * @param inputObj The input object want to contain date. * @param dateFormatStyle Default Date Formatter is "yyyy-MM-dd", you could use your own defined format. * @param beginDate Default value is 1990-01-01 * @param endDate Default value is 2020-01-01 * @param lang 0(English)|1(Chinese) Default Language is 0(English). */ function setday(inputObj,dateFormatStyle,beginDate,endDate,lang){ if(null == inputObj){return null;} new Calendar(inputObj,dateFormatStyle,beginDate,endDate,lang).show(); } /** * Month Picker * @param inputObj The input object want to contain date. * @param dateFormatStyle Default Date Formatter is "yyyy-MM", you could use your own defined format. * @param beginDate Default value is 1990-01 * @param endDate Default value is 2020-01 * @param lang 0(English)|1(Chinese) Default Language is 0(English). */ function setmonth(inputObj,dateFormatStyle,beginDate,endDate,lang){ if(null == inputObj){return null;} new Calendar(inputObj,dateFormatStyle,beginDate,endDate,lang,"m").show(); } /** Calendar Style */ Calendar.prototype.style = function(){ var strStyle = ""; return strStyle; } /** //Classic Style Calendar.prototype.style = function(){ var strStyle = ""; return strStyle; } */ function getFrameDocument(frame){ if ( frame.contentDocument ) { // DOM var doc = frame.contentDocument; } else if (frame.contentWindow) { // IE win var doc = frame.contentWindow.document; } return doc; } /** * Parse Date value from String * @param format the pattern of date */ String.prototype.toDate = function(format){ if(null == format) format="yyyy-MM-dd"; var pattern = format.replace("yyyy", "(\\~1{4})").replace("yy", "(\\~1{2})") .replace("MM", "(\\~1{2})").replace("M", "(\\~1{1,2})") .replace("dd", "(\\~1{2})").replace("d", "(\\~1{1,2})").replace(/~1/g, "d"); var returnDate; if (new RegExp(pattern).test(this)) { var yPos = format.indexOf("yyyy"); var mPos = format.indexOf("MM"); var dPos = format.indexOf("dd"); if (mPos == -1) mPos = format.indexOf("M"); if (yPos == -1) yPos = format.indexOf("yy"); if (dPos == -1) dPos = format.indexOf("d"); var pos = new Array(yPos + "y", mPos + "m", dPos + "d"); var data = { y: 0, m: 0, d: 1}; var m = this.match(pattern); for (var i = 1; i < m.length; i++) { if (i == 0) return; var flag = pos[i - 1].split('')[1]; data[flag] = m[i]; //alert(pos[i-1] + ",flag:"+flag + ",i:" + i + "," + data[flag]); }; if (data.y.toString().length == 2) { data.y = parseInt("20" + data.y); } data.m = data.m - 1; returnDate = new Date(data.y, data.m, data.d); } if (returnDate == null || isNaN(returnDate)) returnDate = new Date(); return returnDate; }; /** * Date Format * @param style date format like 'yyyyMMdd' */ Date.prototype.format = function(style) { var o = { "M+" : this.getMonth() + 1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(), //second "w+" : "日一二三四五六".charAt(this.getDay()), //week "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter "S" : this.getMilliseconds() //millisecond } if(/(y+)/.test(style)) { style = style.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); } for(var k in o){ if(new RegExp("("+ k +")").test(style)){ style = style.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); } } return style; }; /** Date add by interval @param interval y Year,m Month,d Day,w Week @param number */ Date.prototype.dateAdd = function(interval, number) { switch (interval) { case "y": return new Date(this.getFullYear() + number, this.getMonth(), this.getDate()); break; case "m": return new Date(this.getFullYear(), this.getMonth() + number, checkDate(this.getFullYear(), this.getMonth() + number, this.getDate())); break; case "d": return new Date(this.getFullYear(), this.getMonth(), this.getDate() + number); break; case "w": return new Date(this.getFullYear(), this.getMonth(), 7 * number + this.getDate()); break; } } function checkDate(year, month, date){ var enddate = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]; var returnDate = ""; if (year % 4 == 0) { enddate[1] = "29"; } if (date > enddate[month]) { returnDate = enddate[month]; } else { returnDate = date; } return returnDate; } /** Calendar language pack default support english and chinese,if you want to add some other language, please extend it. */ Calendar.language = { "title":[["",""],["年","月"]], "months":[["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"], ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"] ], "weeks":[["S","M","T","W","T","F","S"], ["日","一","二","三","四","五","六"] ], weekday:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"], "clear":[["Clear"], ["清空"]], "today":[["Today","Current"], ["今天","当月"]], "close":[["Close"], ["关闭"]] }; /** * Calendar class * @param beginDate 1990-01-01 * @param endDate 2020-01-01 * @param lang 0(English)|1(Chinese) * @param dateFormatStyle "yyyy-MM-dd"; * @param type d Date Picker/m Month Picker * @version 2010-08-20 * @author Coral(coraldane@gmail.com) * @update */ function Calendar(inputObj, dateFormatStyle, beginDate, endDate, lang, type) { this.beginDate = "1900-01-01".toDate(); this.endDate = "2020-01-01".toDate(); this.lang = 0; //default language this.type = "d"; this.dateFormatStyle = "yyyy-MM-dd"; if(null != type){ this.type = type; if("m" == this.type){ this.dateFormatStyle = "yyyy-MM"; } } if (dateFormatStyle != null){ this.dateFormatStyle = dateFormatStyle; } this.currentDate = new Date(); var currDate = new Date(); if(null != inputObj.value && "" != inputObj.value){ currDate = inputObj.value.toDate(this.dateFormatStyle); } if(null != currDate){ this.date = currDate; }else{ this.date = new Date(); } if (null != beginDate){ this.beginDate = beginDate; } if(null != endDate){ this.endDate = endDate; } if (lang != null){ this.lang = lang; } this.dateControl = inputObj; this.panel = document.getElementById("calendarPanel"); this.iframe = document.getElementById("calendarIframe"); this.isFocus = false; this.draw(); } Calendar.prototype.draw = function() { var currDate = this.date.format("yyyy-MM").toDate("yyyy-MM"); if(currDate < this.beginDate){ this.date = this.beginDate; } if(currDate > this.endDate){ this.date = this.endDate; } this.year = this.date.getFullYear(); this.month = this.date.getMonth(); var head = '' + '' + this.style() + ''; var thisMonthFirstDate = this.date.dateAdd("d",1-this.date.getDate()); var lastMonthEndDate = thisMonthFirstDate.dateAdd("d",-1); var lastMonthDate = thisMonthFirstDate.getDay(); lastMonthEndDate = lastMonthEndDate.getDate(); var thisMonthLastDate = thisMonthFirstDate.dateAdd("m",1).dateAdd("d",-1); var thisMonthEndDate = thisMonthLastDate.getDate(); var thisMonthEndDay = thisMonthLastDate.getDay(); var lis = "
"; lis += "
"; lis += "
"; lis += "" lis += "
";//close calendarBody lis += "
    "; lis += "
  • " + Calendar.language.clear[this.lang] +"
  • "; lis += "
  • " + Calendar.language.today[this.lang][0] +"
  • "; }else{ lis += "
  • " + this.date.getFullYear() + "" + Calendar.language["title"][this.lang][0] + "
  • "; lis += "
  • »
"; lis += "
"; lis += "" lis += "
";//close calendarBody lis += "
";//close calendarBottom lis += "
";//close calendar lis += ""; var doc = getFrameDocument(this.iframe); doc.writeln(head); doc.writeln(lis); doc.close(); this.document = doc; this.bingEvent(); } /** * Bind Click Event into Calendar */ Calendar.prototype.bingEvent = function(){ var calendar = this; this.setAutoHeight(); this.panel.onmouseover = function(){calendar.isFocus = true;} this.panel.onmouseout = function(){calendar.isFocus = false;} this.dateControl.onblur = function(){ if(!calendar.isFocus){ calendar.hide(); } } this.getElementById("selectCurrent").onclick = function(){ calendar.date = new Date(); calendar.valueSelected(calendar.date); calendar.hide(); } this.getElementById("emptyCalendar").onclick = function(){calendar.dateControl.value = "";calendar.hide();} this.getElementById("closeCalendar").onclick = function(){calendar.hide();} this.getElementById("PrevYear").onclick = function(){ calendar.date = calendar.date.dateAdd("y",-1); calendar.draw(); } if(this.getElementById("PrevMonth")){ this.getElementById("PrevMonth").onclick = function(){ calendar.date = calendar.date.dateAdd("m",-1); calendar.draw(); } this.getElementById("NextMonth").onclick = function(){ calendar.date = calendar.date.dateAdd("m",1); calendar.draw(); } } this.getElementById("NextYear").onclick = function(){ calendar.date = calendar.date.dateAdd("y",1); calendar.draw(); } this.getElementById("selectThisYear").onclick = function(){calendar.selectThisYear();} if("d" == this.type){ this.getElementById("selectThisMonth").onclick = function(){calendar.selectThisMonth();} } var elements = getElementsByClassName(this.document, "li", "thisMonth"); for(var i=0; i= beginYear; i--){ selectStr += ""; } selectStr += ""; spanObj.innerHTML = selectStr; var selectYearObj = spanObj.childNodes(0); selectYearObj.value = curYear; selectYearObj.onchange = function(){ calendar.date.setFullYear(selectYearObj.value); calendar.draw(); } } Calendar.prototype.selectThisMonth = function(){ var calendar = this; var curMonth = this.date.getMonth() + 1; var curYear = this.date.getFullYear(); var endYear = this.endDate.getFullYear(); var endMonth = 12; if(curYear == endYear){ endMonth = this.endDate.getMonth + 1; } var spanObj = this.getElementById("selectThisMonth"); var selectStr = ""; spanObj.innerHTML = selectStr; var selectMonthObj = spanObj.childNodes(0); selectMonthObj.value = curMonth; selectMonthObj.onchange = function(){ calendar.date.setMonth(selectMonthObj.value-1); calendar.draw(); } } Calendar.prototype.valueSelected = function(date){ this.dateControl.value = date.format(this.dateFormatStyle); } /** * Set Auto Height for Calendar Panel Div */ Calendar.prototype.setAutoHeight = function(){ var height = this.document.body.scrollHeight; var width = this.getElementById("calendar").style.width; width = (parseInt(width.substr(0,width.length-1)) + 2) + "px"; this.iframe.style.height = height; this.panel.style.height = height; this.panel.style.width = width; } //Extend document.getElementById(id) Calendar.prototype.getElementById = function(id){ if (typeof(id) != "string" || id == "") return null; if(null == this.document) return null; if (this.document.getElementById) return this.document.getElementById(id); if (this.document.all) return this.document.all(id); try {return eval(id);} catch(e){ return null;} } //Extend object.getElementsByTagName(tagName) Calendar.prototype.getElementsByTagName = function(tagName){ if(null == this.document) return null; if (this.document.getElementsByTagName) return this.document.getElementsByTagName(tagName); if (this.document.all) return this.document.all.tags(tagName); } /** * Find a HTML Object by TagName and className * @param oElm parentNode Object * @param strTagName tag name want to find * @param strClassName class name */ function getElementsByClassName(oElm, strTagName, strClassName){ var arrElements = (strTagName == "*" && oElm.all)? oElm.all:oElm.getElementsByTagName(strTagName); var arrReturnElements = new Array(); strClassName = strClassName.replace(/\-/g, "\\-"); var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); var oElement; for(var i=0; i < arrElements.length; i++){ oElement = arrElements[i]; if(oRegExp.test(oElement.className)){ arrReturnElements.push(oElement); } } return (arrReturnElements) } //find the absolute position Calendar.prototype.getAbsPoint = function (e){ var x = e.offsetLeft; var y = e.offsetTop; while(e = e.offsetParent){ x += e.offsetLeft; y += e.offsetTop; } return {"x": x, "y": y}; } //显示日历 Calendar.prototype.show = function () { var xy = this.getAbsPoint(this.dateControl); this.panel.style.left = xy.x + "px"; this.panel.style.top = (xy.y + this.dateControl.offsetHeight) + "px"; this.setDisplayStyle("select", "hidden"); this.panel.style.visibility = "visible"; } //Hide Calendar Calendar.prototype.hide = function() { this.setDisplayStyle("select", "visible"); this.panel.style.visibility = "hidden"; this.isFocus = false; } //Set Calendar Picker visible or invisible Calendar.prototype.setDisplayStyle = function(tagName, style) { var tags = this.getElementsByTagName(tagName) for(var i = 0; i < tags.length; i++) { if (tagName.toLowerCase() == "select" && (tags[i].name == "calendarYear" || tags[i].name == "calendarMonth")){ continue; } tags[i].style.visibility = style; } } document.write('");