1
2 //////////////////////////////
3 // UncCalendar 1.0 //
4 // Author: Zhong@UNC //
5 // E-mail: zhong@uncnet.com //
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=' ';" +
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 + "><<</td>";
154 output += " <td style=\"" + arrowStyle + "\" align=left title=\"上個月\"" + pmEvent + "><</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 + ">></td>";
159 output += " <td style=\"" + arrowStyle + "\" title=\"下一年\"" + nyEvent + ">>></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 + "\"> </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：
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 = "選擇日期"; //按鈕顯示的文字。
21 date2.canEdits = false; //input是否可以輸入
22 date2.hidesSelects = true; //顯增日期選擇面板時是否隱藏頁面中的select控件。
23 date2.display();
24 </script>
25
posted on 2007-02-07 10:19
-274°C 閱讀(483)
評論(0) 編輯 收藏 所屬分類:
web前端