日历控件 （js）

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->   1 
  2  //////////////////////////////
  3  // UncCalendar 1.0          //
  4  // Author: Zhong@UNC        //
  5  // E-mail: [email protected] //
  6  // 06/01/2004               //
  7  //////////////////////////////
  8 
  9 
 10 
 11  function UncCalendar (sName, sDate)
 12  {
 13    /////////////////////////////////////////////////////////////////////////
 14    //定义UncCalendar对象的属性并赋默认值。
 15    //inputValue属性的值为"today"时表示（客户机）当前日期。
 16    //直接在这里把默认值修改成你想要的，使用时你就什么也不用设置了。
 17    this.inputName = sName || "uncDate";
 18    this.inputValue = sDate || "";
 19    this.inputSize = 10;
 20    this.inputClass = "";
 21    this.color = "#333333";
 22    this.bgColor = "#EEEEEE";
 23    this.buttonWidth = 60;
 24    this.buttonWords = "选择日期";
 25    this.canEdits = true;
 26    this.hidesSelects = true;
 27    /////////////////////////////////////////////////////////////////////////
 28 
 29    /////////////////////////////////////////////////////////////////////////
 30    //定义display方法。
 31    this.display = function ()
 32    {
 33      var reDate = /^(19[7-9]\d|20[0-5]\d)\-(0?\d|1[0-2])\-([0-2]?\d|3[01])$/;
 34      if (reDate.test(this.inputValue))
 35      {
 36        var dates = this.inputValue.split("-");
 37        var year = parseInt(dates[0], 10);
 38        var month = parseInt(dates[1], 10);
 39        var mday = parseInt(dates[2], 10);
 40      }
 41      else
 42      {
 43        var today = new Date();
 44        var year = today.getFullYear();
 45        var month = today.getMonth()+1;
 46        var mday = today.getDate();
 47      }
 48      if (this.inputValue == "today")
 49        inputValue = year + "-" + month + "-" + mday;
 50      else
 51        inputValue = this.inputValue;
 52      var lastDay = new Date(year, month, 0);
 53      lastDay = lastDay.getDate();
 54      var firstDay = new Date(year, month-1, 1);
 55      firstDay = firstDay.getDay();
 56      
 57      var btnBorder =
 58        "border-left:1px solid " + this.color + ";" +
 59        "border-right:1px solid " + this.color + ";" +
 60        "border-top:1px solid " + this.color + ";" +
 61        "border-bottom:1px solid " + this.color + ";";
 62      var btnStyle =
 63        "padding-top:3px;cursor:default;width:" + this.buttonWidth + "px;text-align:center;height:18px;top:-9px;" +
 64        "font:normal 12px 宋体;position:absolute;z-index:99;background-color:" + this.bgColor + ";" +
 65        "line-height:12px;" + btnBorder + "color:" + this.color + ";";
 66      var boardStyle = 
 67        "position:absolute;width:1px;height:1px;background:" + this.bgColor + ";top:8px;border:1px solid "+
 68        this.color + ";display:none;padding:3px;";
 69      var buttonEvent =
 70        " onmouseover=\"this.childNodes[0].style.borderBottom='0px';" + 
 71            "this.childNodes[1].style.display='';this.style.zIndex=100;" +
 72            (this.hidesSelects ?
 73            "var slts=document.getElementsByTagName('SELECT');" +
 74            "for(var i=0;i < slts .length;i++)slts[i].style.visibility ='hidden';"
 75             : "") + "\"" +
 76        " onmouseout =\"this.childNodes[0].style.borderBottom='1px  solid " + this.color + "';" +
 77            "this.childNodes[1].style.display ='none';this.style.zIndex=99;"  +
 78            (this.hidesSelects ?
 79            "var slts =document.getElementsByTagName('SELECT');"  +
 80            "for(var i =0;i<slts.length;i++)slts[i].style.visibility='';"
 81             : "") + "\"" +
 82        " onselectstart =\"return  false;\"";
 83      var mdayStyle  = "font:normal 9px Verdana,Arial,宋体;line-height:12px;cursor:default;color:"  + this.color;
 84      var weekStyle  = "font:normal 12px 宋体;line-height:15px;cursor:default;color:"  + this.color;
 85      var arrowStyle  = "font:bold 7px Verdana,宋体;cursor:hand;line-height:16px;color:"  + this.color;
 86      var ymStyle  = "font:bold 12px 宋体;line-height:16px;cursor:default;color:"  + this.color;
 87      var changeMdays  = 
 88        "var year=parseInt(this.parentNode.cells[2].childNodes[0].innerText);"  +
 89        "var month =parseInt(this.parentNode.cells[2].childNodes[2].innerText);"  +
 90        "var firstDay =new  Date(year,month-1,1);firstDay =firstDay.getDay();"  +
 91        "var lastDay =new  Date(year,month,0);lastDay =lastDay.getDate();"  +
 92        "var tab =this.parentNode.parentNode,  day =1;"  +
 93        "for(var row =2;row<8;row++)"  +
 94        "  for(var col =0;col<7;col++){"  +
 95        "    if(row ==2&&col<firstDay){"  +
 96        "      tab.rows[row].cells[col].innerHTML ='&nbsp;';"  +
 97        "      tab.rows[row].cells[col].isDay =0;}"  +
 98        "    else if(day< =lastDay){"  +
 99        "      tab.rows[row].cells[col].innerHTML =day;"  +
100        "      tab.rows[row].cells[col].isDay =1;day++;}"  +
101        "    else{" +
102        "      tab.rows[row].cells[col].innerHTML ='';"  +
103        "      tab.rows[row].cells[col].isDay =0;}"  +
104        "  }";
105      var pyEvent  =
106        " onclick=\" var y =this.parentNode.cells[2].childNodes[0];y.innerText=parseInt(y.innerText)-1;"  +
107                    changeMdays + "\"";
108      var pmEvent  =
109        " onclick=\" var y =this.parentNode.cells[2].childNodes[0];m=this.parentNode.cells[2].childNodes[2];"  +
110                   "m.innerText =parseInt(m.innerText)-1;if(m.innerText=='0'){m.innerText=12;y.innerText="  +
111                   "parseInt(y.innerText)-1;}" + changeMdays + "\"";
112      var nmEvent  =
113        " onclick=\" var y =this.parentNode.cells[2].childNodes[0];m=this.parentNode.cells[2].childNodes[2];"  +
114                   "m.innerText =parseInt(m.innerText)+1;if(m.innerText=='13'){m.innerText=1;y.innerText="  +
115                   "parseInt(y.innerText)+1;}" + changeMdays + "\"";
116      var nyEvent  =
117        " onclick=\" var y =this.parentNode.cells[2].childNodes[0];y.innerText=parseInt(y.innerText)+1;"  +
118                    changeMdays + "\"";
119      var mdayEvent  =
120        " onmouseover=\" if(event.srcElement.tagName =='TD'&&event.srcElement.isDay){"  +
121            "event.srcElement.style.backgroundColor ='"  + this.color + "';" +
122            "event.srcElement.style.color ='"  + this.bgColor + "';" +
123            "event.srcElement.style.cursor ='hand';"  +
124            "var ym =event.srcElement.parentNode.parentNode.rows[0].cells[2].childNodes;"  +
125            "event.srcElement.title =ym[0].innerText+'-'+ym[2].innerText+'-'+event.srcElement.innerText;}\""  +
126        " onmouseout =\"if(event.srcElement.tagName=='TD'&&event.srcElement.isDay){"  +
127            "event.srcElement.style.backgroundColor ='"  + this.bgColor + "';" +
128            "event.srcElement.style.color ='"  + this.color + "';" +
129            "event.srcElement.style.cursor ='default';"  +
130            "var ym =event.srcElement.parentNode.parentNode.rows[0].cells[2].childNodes;"  +
131            "event.srcElement.title =ym[0].innerText+'-'+ym[2].innerText+'-'+event.srcElement.innerText;}\""  +
132        " onclick =\"if(event.srcElement.tagName=='TD'&&event.srcElement.isDay){"  +
133            "var inp =this.parentNode.parentNode.parentNode.previousSibling.childNodes[0];"  +
134            "inp.value =this.rows[0].cells[2].childNodes[0].innerText+'-'+this.rows[0].cells[2].childNodes[2]."  +
135            "innerText+'-'+event.srcElement.innerText;" +
136            "this.parentNode.style.display ='none';this.parentNode.parentNode.style.zIndex=99;"  +
137            "this.parentNode.previousSibling.style.borderBottom ='1px  solid " + this.color + "';" +
138            (this.hidesSelects ?
139            "var slts =document.getElementsByTagName('SELECT');"  +
140            "for(var i =0;i<slts.length;i++)slts[i].style.visibility='';"
141             : "") + "}\"";
142 
143      var output  = "" ;
144      output + = "<table cellpadding=0 cellspacing=1 style='display:inline;'><tr>" ;
145      output + = "  <td><input size="  + this.inputSize + " maxlength =10  value =\""  + inputValue + "\"";
146      output + =    (this.canEdits  ? "" : " readonly") + " name =\""  + this.inputName + "\" ></ td > ";
147      output += "   < td  width =" + this.buttonWidth + " > ";
148      output += "     < div  style =\"position:absolute;overflow:visible;width:0px;height:0px;\""  + buttonEvent + " > ";
149      output += "       < div  style =\""  + btnStyle + "\" >< nobr > " + this.buttonWords + " </ nobr ></ div > ";
150      output += "       < div  style =\""  + boardStyle + "\" > ";
151      output += "         < table  cellspacing =1  cellpadding =1  width =175"  + mdayEvent + " > ";
152      output += "           < tr  height =20  align =center > ";
153      output += "             < td  style =\""  + arrowStyle + "\" title =\"上一年\""  + pyEvent + " > &lt;&lt; </ td > ";
154      output += "             < td  style =\""  + arrowStyle + "\" align =left  title =\"上个月\""  + pmEvent + " > &lt; </ td > ";
155      output += "             < td  colspan =3  style =\""  + ymStyle + "\" valign =bottom > ";
156      output += "               < span > " + year + " </ span >< span > 年 </ span >< span > " + month + " </ span >< span > 月 </ span > ";
157      output += "             </ td > ";
158      output += "             < td  style =\""  + arrowStyle + "\" align =right  title =\"下个月\""  + nmEvent + " > &gt; </ td > ";
159      output += "             < td  style =\""  + arrowStyle + "\" title =\"下一年\""  + nyEvent + " > &gt;&gt; </ td > ";
160      output += "           </ tr > ";
161      output += "           < tr  height =20  align =center  bgcolor =" + this.bgColor + " > ";
162      output += "             < td  width =14%  style =\""  + weekStyle + "\" > 日 </ td > ";
163      output += "             < td  width =14%  style =\""  + weekStyle + "\" > 一 </ td > ";
164      output += "             < td  width =14%  style =\""  + weekStyle + "\" > 二 </ td > ";
165      output += "             < td  width =14%  style =\""  + weekStyle + "\" > 三 </ td > ";
166      output += "             < td  width =14%  style =\""  + weekStyle + "\" > 四 </ td > ";
167      output += "             < td  width =14%  style =\""  + weekStyle + "\" > 五 </ td > ";
168      output += "             < td  width =14%  style =\""  + weekStyle + "\" > 六 </ td > ";
169      output += "           </ tr > ";
170      var day = 1;
171      for (var row=0; row < 6 ; row++)
172      {
173        output + = "<tr align=center>" ;
174        for (var col =0;  col<7; col++)
175        {
176          if (row  ==  0 && col < firstDay)
177            output + = "<td style=\" " + mdayStyle + "\" > &nbsp; </ td > ";
178          else if (day  < = lastDay )
179          {
180            output + = "<td style=\" " + mdayStyle + "\" isDay =1 > " + day + " </ td > ";
181            day++;
182          }
183          else
184            output += " < td  style =\""  + mdayStyle + "\" ></ td > ";
185        }
186        output += " </ tr > ";
187      }
188      output += "         </ table > ";
189      output += "       </ div > ";
190      output += "     </ div > ";
191      output += "   </ td > ";
192      output += " </ tr ></ table > ";
193      document.write(output);
194    }
195    /////////////////////////////////////////////////////////////////////////
196  }

HTML：

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->  1  < script  src =uc.js ></ script >
 2  < script  language =javascript >
 3  // 拿过来就可以用，很简单。
 4  // 实例化时第一个参数是input的name；第二个参数是value，设为"today"就是当天。
 5     var  date1  =   new  UncCalendar ( " date " ,  " 2008-08-08 " );
 6    date1.display();
 7  </ script >
 8  < br >< br >
 9  < script  language =javascript >
10  // 有一些属性，可以灵活的定制。
11  // 事实上直接到uc.js中修改默认属性值使用起来会更方便一些，里面有注释。
12     var  date2  =   new  UncCalendar ();
13    date2.inputName  =   " date " ;  // input的name。
14    date2.inputValue  =   " today " ;   // 你会看到，input中将显示客户机系统当前时间。
15    date2.inputSize  =   10 ;   // input的size
16    date2.inputClass  =   "" ;   // input的class，这样你就能自己控制input的样式。
17    date2.color  =   " #000080 " ;   // 选择按钮、面板的边框以及日历中字的颜色。
18    date2.bgColor  =   " #EEEEFF " ;   // 选择按钮、面板的背景色。
19    date2.buttonWidth  =   60 ;   // 按钮宽度
20    date2.buttonWords  =   " background-color: rgb(245,

分享到：

模拟选择题多选 | 省市地区三级菜单

• 2007-02-07 10:19
• 浏览 254
• 评论(0)
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论