日历控件 （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: [e-mail] //
  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
• 浏览 714
• 评论(0)
• 查看更多