【Java EE 学习第25天】【网上图书商城js小技术点总结】

  1 /**
  2  * add auto hide when mouse moveout
  3  * 
  4  * @version 1.0.1 
  5  * @date 2010-11-23
  6  * @author coraldane@gmail.com
  7 */
  8 
  9 /**   
 10  * Date Picker
 11  * @param   inputObj  The input object want to contain date.
 12  * @param   dateFormatStyle  Default Date Formatter is "yyyy-MM-dd", you could use your own defined format.
 13  * @param   beginDate Default value is 1990-01-01
 14  * @param   endDate   Default value is 2020-01-01
 15  * @param   lang      0(English)|1(Chinese)  Default Language is 0(English).
 16  */
 17 function setday(inputObj,dateFormatStyle,beginDate,endDate,lang){
 18     if(null == inputObj){return null;}
 19     new Calendar(inputObj,dateFormatStyle,beginDate,endDate,lang).show();
 20 }
 21 
 22 /**   
 23  * Month Picker
 24  * @param   inputObj  The input object want to contain date.
 25  * @param   dateFormatStyle  Default Date Formatter is "yyyy-MM", you could use your own defined format.
 26  * @param   beginDate Default value is 1990-01
 27  * @param   endDate   Default value is 2020-01
 28  * @param   lang      0(English)|1(Chinese)  Default Language is 0(English).
 29  */
 30 function setmonth(inputObj,dateFormatStyle,beginDate,endDate,lang){
 31     if(null == inputObj){return null;}
 32     new Calendar(inputObj,dateFormatStyle,beginDate,endDate,lang,"m").show();
 33 }
 34 
 35 /**
 36 Calendar Style
 37 */
 38 Calendar.prototype.style = function(){
 39     var strStyle = "<style type=‘text/css‘>";
 40     strStyle += ".calendar {font-size:12px; margin:0;padding:0px;border:1px solid #397EAE;background-color:#DBE7F2;}";
 41     strStyle += ".calendar ul {list-style-type:none; margin:0; padding:0;vertical-align:middle;}";
 42     strStyle += ".calendar li {float:left;}.calendar b{font-weight:bold;}";
 43     strStyle += ".calendar .day li {height:20px;}";
 44     strStyle += ".calendar .day li,.calendar .date li{float:left;width:14.13%;height:20px;line-height:20px;text-align:center;}";
 45     strStyle += ".calendar .day li{font-weight:bold;} .calendar .date li{background-color:#EDF3F9;}";
 46     strStyle += ".calendar .month li{float:left;width:24.8%;height:20px;line-height:20px;text-align:center;background-color:#EDF3F9;}";
 47     strStyle += ".calendar li a{ text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";
 48     strStyle += ".calendar li:hover {cursor:pointer;color:#f30; text-decoration:none;background-color:#EDF3F9;}";
 49     strStyle += ".calendar .date li:hover, .calendar .month li:hover{cursor:pointer;color:#f30; text-decoration:none;background-color:#DBE7F2;}";
 50     strStyle += ".calendarlihover {color:#f30;text-decoration:none;background-color:#E8F2FE;}";
 51     strStyle += ".calendar li a.hasArticle {font-weight:bold; color:#f60 !important}";
 52     strStyle += ".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";
 53     strStyle += ".selectThisYear, .selectThisMonth{text-decoration:none; margin:0px; color:#000; font-weight:bold}";
 54     strStyle += ".calendar .LastMonth, .calendar .NextMonth{text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";
 55     strStyle += ".calendarTitle{background:#EDF3F9;text-align:center;height:20px;line-height:20px;clear:both;width:100%;}";
 56     strStyle += ".calendarTitle .mark{text-decoration:none;color:#000;font-family:Tahoma;font-size:18px;font-weight:normal;}";
 57     strStyle += ".today{ background-color:#ffffaa;border:1px solid #f60;padding:0 1px;}";
 58     strStyle += ".today a { color:#f30; }";
 59     strStyle += ".calendarBottom {text-align:center;height:20px;line-height:20px;clear:both;width:100%;border-top:1px solid #ddd;}";
 60     strStyle += ".calendarBottom li{float:left;height:20px;line-height:20px;font-weight:bold;text-align:center;}";
 61     strStyle += "</style>";
 62     return strStyle;
 63 }
 64 
 65 /**
 66 //Classic Style
 67 Calendar.prototype.style = function(){
 68     var strStyle = "<style type=‘text/css‘>";
 69     strStyle += ".calendar {font-size:12px; margin:0;padding:0px;border:1px solid #397EAE;}";
 70     strStyle += ".calendar ul {list-style-type:none; margin:0; padding:0;vertical-align:middle;}";
 71     strStyle += ".calendar li {float:left;}.calendar b{font-weight:bold;}";
 72     strStyle += ".calendar .day { background-color:#EDF5FF; height:20px;}";
 73     strStyle += ".calendar .day li,.calendar .date li{ float:left; width:14.13%; height:20px; line-height:20px; text-align:center}";
 74     strStyle += ".calendar .month li{ float:left; width:24.8%; height:20px; line-height:20px; text-align:center}";
 75     strStyle += ".calendar li a{ text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";
 76     strStyle += ".calendar li:hover {cursor:pointer;color:#f30; text-decoration:none;background-color:#E8F2FE;}";
 77     strStyle += ".calendarlihover {color:#f30;text-decoration:none;background-color:#E8F2FE;}";
 78     strStyle += ".calendar li a.hasArticle {font-weight:bold; color:#f60 !important}";
 79     strStyle += ".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";
 80     strStyle += ".selectThisYear, .selectThisMonth{text-decoration:none; margin:0px; color:#000; font-weight:bold}";
 81     strStyle += ".calendar .LastMonth, .calendar .NextMonth{text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";
 82     strStyle += ".calendarTitle {text-align:center;height:20px;line-height:20px;clear:both;width:100%;}";
 83     strStyle += ".calendarTitle .mark{text-decoration: none;color:#000;font-family:Tahoma;font-size:18px;font-weight:normal;line-height: 16px;}";
 84     strStyle += ".today{ background-color:#ffffaa;border:1px solid #f60;padding:0 1px;}";
 85     strStyle += ".today a { color:#f30; }";
 86     strStyle += ".calendarBottom {text-align:center;height:20px;line-height:20px;clear:both;width:100%;border-top:1px solid #ddd;}";
 87     strStyle += ".calendarBottom li{float:left;height:20px;line-height:20px;font-weight:bold;text-align:center;}";
 88     strStyle += "</style>";
 89     return strStyle;
 90 }
 91 */
 92 
 93 function getFrameDocument(frame){
 94     if ( frame.contentDocument ) { // DOM
 95         var doc = frame.contentDocument;
 96     } else if (frame.contentWindow) { // IE win
 97         var doc = frame.contentWindow.document;
 98     }
 99     return doc;
100 }
101 
102 /**   
103  * Parse Date value from String   
104  * @param format the pattern of date   
105  */   
106 String.prototype.toDate = function(format){
107     if(null == format) format="yyyy-MM-dd";
108     var pattern = format.replace("yyyy", "(\\~1{4})").replace("yy", "(\\~1{2})")
109         .replace("MM", "(\\~1{2})").replace("M", "(\\~1{1,2})")
110         .replace("dd", "(\\~1{2})").replace("d", "(\\~1{1,2})").replace(/~1/g, "d");
111     
112     var returnDate;
113     if (new RegExp(pattern).test(this)) {
114         var yPos = format.indexOf("yyyy");
115         var mPos = format.indexOf("MM");
116         var dPos = format.indexOf("dd");
117         if (mPos == -1) mPos = format.indexOf("M");
118         if (yPos == -1) yPos = format.indexOf("yy");
119         if (dPos == -1) dPos = format.indexOf("d");
120         var pos = new Array(yPos + "y", mPos + "m", dPos + "d");
121         var data = { y: 0, m: 0, d: 1};
122         var m = this.match(pattern);
123         for (var i = 1; i < m.length; i++) {
124             if (i == 0) return;
125             var flag = pos[i - 1].split(‘‘)[1];
126             data[flag] = m[i];
127             //alert(pos[i-1] + ",flag:"+flag + ",i:" + i + "," + data[flag]);
128         };
129         
130         if (data.y.toString().length == 2) {
131             data.y = parseInt("20" + data.y);
132         }
133         data.m = data.m - 1;
134         returnDate = new Date(data.y, data.m, data.d);
135     }
136     if (returnDate == null || isNaN(returnDate)) returnDate = new Date();
137     return returnDate;
138  
139 };
140 
141 /**   
142  * Date Format 
143  * @param style date format like ‘yyyyMMdd‘
144  */   
145 Date.prototype.format = function(style) {
146   var o = {   
147     "M+" : this.getMonth() + 1, //month   
148     "d+" : this.getDate(),      //day   
149     "h+" : this.getHours(),     //hour   
150     "m+" : this.getMinutes(),   //minute   
151     "s+" : this.getSeconds(),   //second   
152     "w+" : "日一二三四五六".charAt(this.getDay()),   //week   
153     "q+" : Math.floor((this.getMonth() + 3) / 3),  //quarter   
154     "S"  : this.getMilliseconds() //millisecond   
155   }   
156   if(/(y+)/.test(style)) {   
157     style = style.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));   
158   }
159   for(var k in o){
160     if(new RegExp("("+ k +")").test(style)){   
161       style = style.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));   
162     }
163   } 
164   return style;
165 };
166 
167 /**
168 Date add by interval
169 @param interval y  Year,m  Month,d  Day,w  Week
170 @param number
171 
172 */
173 Date.prototype.dateAdd = function(interval, number) {
174     switch (interval) {
175       case "y":
176         return new Date(this.getFullYear() + number, this.getMonth(), this.getDate());
177         break;
178       case "m":
179         return new Date(this.getFullYear(), this.getMonth() + number, checkDate(this.getFullYear(), this.getMonth() + number, this.getDate()));
180         break;
181       case "d":
182         return new Date(this.getFullYear(), this.getMonth(), this.getDate() + number);
183         break;
184       case "w":
185         return new Date(this.getFullYear(), this.getMonth(), 7 * number + this.getDate());
186         break;
187     }
188 }
189 
190 function checkDate(year, month, date){
191     var enddate = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
192     var returnDate = "";
193     if (year % 4 == 0) {
194         enddate[1] = "29";
195     }
196     if (date > enddate[month]) {
197         returnDate = enddate[month];
198     } else {
199         returnDate = date;
200     }
201     return returnDate;
202 }
203 
204 /**
205 Calendar language pack
206 default support english and chinese,if you want to add some other language, please extend it.
207 */
208 Calendar.language = {
209     "title":[["",""],["年","月"]],
210     "months":[["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
211             ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
212             ],
213     "weeks":[["S","M","T","W","T","F","S"],
214               ["日","一","二","三","四","五","六"]
215             ],
216     weekday:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
217     "clear":[["Clear"], ["清空"]],
218     "today":[["Today","Current"], ["今天","当月"]],
219     "close":[["Close"], ["关闭"]]  
220 };
221 
222 /**   
223  * Calendar class 
224  * @param   beginDate 1990-01-01
225  * @param   endDate   2020-01-01
226  * @param   lang      0(English)|1(Chinese)  
227  * @param   dateFormatStyle  "yyyy-MM-dd";
228  * @param   type  d Date Picker/m Month Picker 
229  * @version 2010-08-20
230  * @author  Coral(coraldane@gmail.com) 
231  * @update 
232  */   
233 function Calendar(inputObj, dateFormatStyle, beginDate, endDate, lang, type) {   
234   this.beginDate = "1900-01-01".toDate();
235   this.endDate = "2020-01-01".toDate();
236   this.lang = 0; //default language
237   this.type = "d";
238   this.dateFormatStyle = "yyyy-MM-dd";
239   
240   if(null != type){
241       this.type = type;
242       if("m" == this.type){
243           this.dateFormatStyle = "yyyy-MM";
244       }
245   }
246   
247   if (dateFormatStyle != null){
248     this.dateFormatStyle = dateFormatStyle;
249   }
250   
251   this.currentDate = new Date();
252   
253   var currDate = new Date();
254   if(null != inputObj.value && "" != inputObj.value){
255       currDate = inputObj.value.toDate(this.dateFormatStyle);
256   }
257   
258   if(null != currDate){
259       this.date = currDate;
260   }else{
261       this.date = new Date();
262   }
263   
264   
265   if (null != beginDate){
266     this.beginDate = beginDate;
267   }
268   if(null != endDate){
269       this.endDate = endDate;
270   }
271   if (lang != null){
272     this.lang = lang;
273   }
274   
275   this.dateControl = inputObj;
276   this.panel = document.getElementById("calendarPanel");
277   this.iframe = document.getElementById("calendarIframe");
278   this.isFocus = false;
279   
280   this.draw();
281 }
282 
283 Calendar.prototype.draw = function() {   
284   var currDate = this.date.format("yyyy-MM").toDate("yyyy-MM");
285   if(currDate < this.beginDate){
286       this.date = this.beginDate;
287   }
288   
289   if(currDate > this.endDate){
290       this.date = this.endDate;
291   }
292   
293   this.year = this.date.getFullYear();
294   this.month = this.date.getMonth();
295   var head  = ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">‘ +
296     ‘<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />‘ +
297   this.style() + ‘</head><body style="padding:0px;margin:0px;">‘;   
298   var thisMonthFirstDate = this.date.dateAdd("d",1-this.date.getDate());
299   var lastMonthEndDate = thisMonthFirstDate.dateAdd("d",-1);
300   var lastMonthDate =  thisMonthFirstDate.getDay();
301   lastMonthEndDate = lastMonthEndDate.getDate();
302   var thisMonthLastDate = thisMonthFirstDate.dateAdd("m",1).dateAdd("d",-1);
303   var thisMonthEndDate = thisMonthLastDate.getDate();
304   var thisMonthEndDay = thisMonthLastDate.getDay();
305   
306   var lis = "<div id=‘calendar‘ class=‘calendar‘ style=‘width:";
307   if("d" == this.type){
308       lis += "150";
309   }else{
310       lis += "120";
311   }
312   lis += "px;‘>";
313   lis += "<div class=‘calendarTitle‘><ul>";
314   lis += "<li id=‘PrevYear‘ class=‘mark‘ style=‘width:12%;‘ title=‘Previous Year‘>&laquo;</li>";
315   if("d" == this.type){
316       lis += "<li id=‘PrevMonth‘ class=‘mark‘ style=‘width:12%;‘ title=‘Previous Month‘>&lsaquo;</li>";
317     lis += "<li style=‘width:30%;‘><span id=‘selectThisYear‘ class=‘selectThisYear‘>" + this.date.getFullYear() + "</span>" + Calendar.language["title"][this.lang][0] + "</li>";
318       if(0 == this.lang){
319           lis += "<li style=‘width:20%;‘><span id=‘selectThisMonth‘ class=‘selectThisMonth‘>" + Calendar.language["months"][this.lang][this.date.getMonth()] + "</span></li>";
320       }else{
321           lis += "<li style=‘width:20%;‘><span id=‘selectThisMonth‘ class=‘selectThisMonth‘>" + (this.date.getMonth() +1) + "</span>" + Calendar.language["title"][this.lang][1] + "</li>";
322       }
323       lis += "<li id=‘NextMonth‘ class=‘mark‘ style=‘width:12%;‘ title=‘Next Month‘>&rsaquo;</li>";
324       lis += "<li id=‘NextYear‘ class=‘mark‘ style=‘width:12%;‘ title=‘Next Year‘>&raquo;</li></ul></div>";
325     lis += "<div class=‘calendarBody‘>";
326       lis += "<ul class=‘day‘>";
327       for(var i=0;i<Calendar.language.weeks[this.lang].length;i++){
328           lis += "<li title=‘" + Calendar.language.weekday[i] + "‘>" + Calendar.language.weeks[this.lang][i] + "</li>";
329       }
330       lis += "</ul><ul class=‘date‘ id=‘thisMonthDate‘>";
331       var lastMonthLis = "";
332       for (var i = 0; i < lastMonthDate; i++) { // Last Month‘s Date
333           //alert(lastMonthDate + "," + lastMonthEndDate);
334         lastMonthLis = "<li class=‘lastMonthDate‘>" + lastMonthEndDate + "</li>" + lastMonthLis;
335         lastMonthEndDate--;
336     }
337     lis += lastMonthLis;
338     for (i = 1; i <= thisMonthEndDate; i++) { // Current Month‘s Date
339         var currentDate = thisMonthFirstDate.dateAdd("d",(i-1));
340         if(currentDate < this.beginDate || currentDate > this.endDate){
341             lis += "<li class=‘lastMonthDate‘>" + i + "</li>";
342               continue;
343         }
344         lis += "<li class=‘thisMonth‘ title=‘" + currentDate.format("yyyy-MM-dd") + "‘><a href=‘javascript:void(0);‘ ";
345         if(currentDate.format("yyyy-MM-dd") == (this.date).format("yyyy-MM-dd")){
346             lis += "class=‘today‘ ";
347         }
348         lis += ">" + i + "</a></li>";
349     }
350     var j = 1;
351     for (i = thisMonthEndDay; i < 6; i++) { // Next Month‘s Date
352         lis += "<li class=‘nextMonthDate‘>" + j + "</li>";
353         j++;
354     }
355       lis += "</ul>"
356       
357       lis += "</div>";//close calendarBody
358     lis += "<div class=‘calendarBottom‘><ul>";
359     lis += "<li id=‘emptyCalendar‘ style=‘width:27%;‘ title=‘Clear‘>" + Calendar.language.clear[this.lang] +"</li>";
360     lis += "<li id=‘selectCurrent‘ style=‘width:45%;‘ title=‘Today‘>" + Calendar.language.today[this.lang][0] +"</li>";
361   }else{
362       lis += "<li style=‘width:74%;‘><span id=‘selectThisYear‘ class=‘selectThisYear‘>" + this.date.getFullYear() + "</span>" + Calendar.language["title"][this.lang][0] + "</li>";
363       lis += "<li id=‘NextYear‘ class=‘mark‘ style=‘width:12%;‘ title=‘Next Year‘>&raquo;</li></ul></div>";
364       lis += "<div class=‘calendarBody‘>";
365       lis += "</ul><ul class=‘month‘ id=‘thisMonth‘>";
366       for(var i=1; i<=12; i++){
367           var currentDate = (this.year + "-" + (i>9?i:"0"+i)).toDate("yyyy-MM");
368           if(currentDate < this.beginDate || currentDate > this.endDate){
369               lis += "<li class=‘lastMonthDate‘>" + i + "</li>";
370               continue;
371           }
372           lis += "<li class=‘thisMonth‘ title=‘" + this.year + "-" + (i>9?i:"0"+i) + "-01‘><a href=‘javascript:void(0);‘";
373           if((this.year+"-"+(i>9?i:"0"+i)) == (this.date).format("yyyy-MM")){
374               lis += " class=‘today‘ ";
375           }
376           lis += ">" + i + "</a></li>";
377       }
378       lis += "</ul>"
379       
380       lis += "</div>";//close calendarBody
381     lis += "<div class=‘calendarBottom‘><ul>";
382     lis += "<li id=‘emptyCalendar‘ style=‘width:27%;‘ title=‘Clear‘>" + Calendar.language.clear[this.lang] +"</li>";
383     lis += "<li id=‘selectCurrent‘ style=‘width:45%;‘ title=‘Current Month‘>" + Calendar.language.today[this.lang][1] +"</li>";
384   }
385   
386   lis += "<li id=‘closeCalendar‘ style=‘width:27%;‘ title=‘Close‘>" + Calendar.language.close[this.lang] +"</li>";
387   lis += "</ul></div>";//close calendarBottom
388   lis += "</div>";//close calendar
389   lis += "</body></html>";
390   var doc = getFrameDocument(this.iframe);
391   doc.writeln(head);
392   doc.writeln(lis);
393   doc.close();
394   this.document = doc;
395   
396   this.bingEvent();
397 }
398 
399 /**
400 * Bind Click Event into Calendar
401 */
402 Calendar.prototype.bingEvent = function(){
403   var calendar = this;
404   
405   this.setAutoHeight();
406     
407   this.panel.onmouseover = function(){calendar.isFocus = true;}
408   this.panel.onmouseout = function(){calendar.isFocus = false;}
409   
410   this.dateControl.onblur = function(){
411       if(!calendar.isFocus){
412           calendar.hide();
413       }
414   }
415   
416   this.getElementById("selectCurrent").onclick = function(){
417       calendar.date = new Date();
418       calendar.valueSelected(calendar.date);
419       calendar.hide();
420   }
421   this.getElementById("emptyCalendar").onclick = function(){calendar.dateControl.value = "";calendar.hide();}
422   this.getElementById("closeCalendar").onclick = function(){calendar.hide();}
423   
424   this.getElementById("PrevYear").onclick = function(){
425       calendar.date = calendar.date.dateAdd("y",-1);
426       calendar.draw();
427   }
428   
429   if(this.getElementById("PrevMonth")){
430       this.getElementById("PrevMonth").onclick = function(){
431           calendar.date = calendar.date.dateAdd("m",-1);
432           calendar.draw();
433       }
434       this.getElementById("NextMonth").onclick = function(){
435           calendar.date = calendar.date.dateAdd("m",1);
436           calendar.draw();
437       }
438   }
439   
440   this.getElementById("NextYear").onclick = function(){
441       calendar.date = calendar.date.dateAdd("y",1);
442       calendar.draw();
443   }
444   
445   this.getElementById("selectThisYear").onclick = function(){calendar.selectThisYear();}
446   if("d" == this.type){
447       this.getElementById("selectThisMonth").onclick = function(){calendar.selectThisMonth();}
448   }
449   
450   var elements = getElementsByClassName(this.document, "li", "thisMonth");
451   for(var i=0; i<elements.length; i++){
452     elements[i].onclick = function(){
453         calendar.date = this.title.toDate();
454           calendar.valueSelected(calendar.date);
455           calendar.hide();
456     }
457   }
458 }
459 
460 Calendar.prototype.selectThisYear = function(){
461     var calendar = this;
462     var curYear = this.date.getFullYear();
463     var beginYear = this.beginDate.getFullYear();
464     var endYear = this.endDate.getFullYear();
465     var spanObj = this.getElementById("selectThisYear");
466     var selectStr = "<select style=‘font-size:10px;‘>";
467     for(var i = endYear; i >= beginYear; i--){
468         selectStr += "<option value=‘" + i + "‘>" + i + "</option>";
469     }
470     selectStr += "</select>";
471     spanObj.innerHTML = selectStr;
472     var selectYearObj = spanObj.childNodes(0);
473     selectYearObj.value = curYear;
474     selectYearObj.onchange = function(){
475         calendar.date.setFullYear(selectYearObj.value);
476         calendar.draw();
477     }
478 }
479 
480 Calendar.prototype.selectThisMonth = function(){
481     var calendar = this;
482     var curMonth = this.date.getMonth() + 1;
483     var curYear = this.date.getFullYear();
484     var endYear = this.endDate.getFullYear();
485     var endMonth = 12;
486     if(curYear == endYear){
487         endMonth = this.endDate.getMonth + 1;
488     }
489     var spanObj = this.getElementById("selectThisMonth");
490     var selectStr = "<select style=‘font-size:10px;‘>";
491     for(var i = 1; i <= endMonth; i++){
492         selectStr += "<option value=‘" + i + "‘>" + Calendar.language["months"][this.lang][i-1] + "</option>";
493     }
494     selectStr += "</select>";
495     spanObj.innerHTML = selectStr;
496     var selectMonthObj = spanObj.childNodes(0);
497     selectMonthObj.value = curMonth;
498     selectMonthObj.onchange = function(){
499         calendar.date.setMonth(selectMonthObj.value-1);
500         calendar.draw();
501     }
502 }
503 
504 Calendar.prototype.valueSelected = function(date){
505     this.dateControl.value = date.format(this.dateFormatStyle);
506 }
507 
508 /**
509 * Set Auto Height for Calendar Panel Div
510 */
511 Calendar.prototype.setAutoHeight = function(){
512     var height = this.document.body.scrollHeight;
513     var width = this.getElementById("calendar").style.width;
514     width = (parseInt(width.substr(0,width.length-1)) + 2) + "px";
515     this.iframe.style.height = height;
516     this.panel.style.height = height;
517     this.panel.style.width = width;
518 }
519 
520 //Extend document.getElementById(id)
521 Calendar.prototype.getElementById = function(id){
522   if (typeof(id) != "string" || id == "") return null;
523   if(null == this.document) return null;
524   if (this.document.getElementById) return this.document.getElementById(id);   
525   if (this.document.all) return this.document.all(id);   
526   try {return eval(id);} catch(e){ return null;}   
527 }
528   
529 //Extend object.getElementsByTagName(tagName)   
530 Calendar.prototype.getElementsByTagName = function(tagName){
531   if(null == this.document) return null;
532   if (this.document.getElementsByTagName) return this.document.getElementsByTagName(tagName);   
533   if (this.document.all) return this.document.all.tags(tagName);   
534 }   
535 
536 /**
537 * Find a HTML Object by TagName and className
538 * @param oElm  parentNode Object
539 * @param strTagName tag name want to find
540 * @param strClassName class name
541 */
542 function getElementsByClassName(oElm, strTagName, strClassName){  
543     var arrElements = (strTagName == "*" && oElm.all)? oElm.all:oElm.getElementsByTagName(strTagName);  
544     var arrReturnElements = new Array();  
545     strClassName = strClassName.replace(/\-/g, "\\-");  
546     var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");  
547     var oElement;  
548     for(var i=0; i < arrElements.length; i++){  
549         oElement = arrElements[i];  
550         if(oRegExp.test(oElement.className)){  
551             arrReturnElements.push(oElement);  
552         }  
553     }  
554     return (arrReturnElements)  
555 } 
556 
557 
558 //find the absolute position
559 Calendar.prototype.getAbsPoint = function (e){   
560   var x = e.offsetLeft;   
561   var y = e.offsetTop;   
562   while(e = e.offsetParent){   
563     x += e.offsetLeft;   
564     y += e.offsetTop;   
565   }   
566   return {"x": x, "y": y};   
567 }   
568   
569 //显示日历   
570 Calendar.prototype.show = function () {
571   var xy = this.getAbsPoint(this.dateControl);
572   this.panel.style.left = xy.x + "px";
573   this.panel.style.top = (xy.y + this.dateControl.offsetHeight) + "px";
574   this.setDisplayStyle("select", "hidden");
575   this.panel.style.visibility = "visible";
576 }
577 
578 //Hide Calendar   
579 Calendar.prototype.hide = function() {
580   this.setDisplayStyle("select", "visible");
581   this.panel.style.visibility = "hidden";
582   this.isFocus = false;
583 }
584   
585 //Set Calendar Picker visible or invisible
586 Calendar.prototype.setDisplayStyle = function(tagName, style) {   
587   var tags = this.getElementsByTagName(tagName)   
588   for(var i = 0; i < tags.length; i++) {   
589     if (tagName.toLowerCase() == "select" && 
590        (tags[i].name == "calendarYear" ||   
591       tags[i].name == "calendarMonth")){   
592       continue;
593     }
594     tags[i].style.visibility = style;   
595   }
596 }
597 
598 document.write(‘<div id="calendarPanel" style="position:absolute;visibility:hidden;z-index:9999;background-color:#FFFFFF;font-size:12px;width:20px;">‘);
599 document.write("<iframe id=‘calendarIframe‘ scrolling=‘no‘ frameborder=‘0‘ width=‘100%‘ height=‘100%‘></iframe></div>");