以前在表单里面需要用户输入日期的时候，总是用一个text的输入框让用户自己按照格式输入，这样还需要对用户的输入进行有效性检查。经过几次后，觉得烦了，还是用一个像客户端的控件一样的东西让用户选择的比较好一些。下面是我所使用的JavaScript：
1
//日历
2var date_start,date_end,g_object
3var today = new Date();
4var separator="-";
5var inover=false;
6
7//mode :时间变换的类型0-年 1-月 2-直接选择月
8function change_date(temp,mode)
9{
10 var t_month,t_year
11 if (mode){
12 if(mode==1)
13 t_month=parseInt(cele_date_month.value,10)+parseInt(temp,10);
14 else
15 t_month=parseInt(temp)
16 if (t_month<cele_date_month.options(0).text) {
17 cele_date_month.value=cele_date_month.options(cele_date_month.length-1).text;
18 change_date(parseInt(cele_date_year.value,10)-1,0);
19 }
20 else{
21 if (t_month>cele_date_month.options(cele_date_month.length-1).text){
22 cele_date_month.value=cele_date_month.options(0).text;
23 change_date(parseInt(cele_date_year.value,10)+1,0);
24 }
25 else
26 {cele_date_month.value=t_month;
27 set_cele_date(cele_date_year.value,cele_date_month.value);
28 }
29 }
30 }
31 else{
32 t_year=parseInt(temp,10);
33
34 if (t_year<cele_date_year.options(0).text) {
35 cele_date_year.value=cele_date_year.options(0).text;
36 set_cele_date(cele_date_year.value,1);
37 }
38 else{
39 if (parseInt(t_year,10)>parseInt(cele_date_year.options(cele_date_year.length-1).text,10)){
40 cele_date_year.value=cele_date_year.options(cele_date_year.length-1).text;
41 set_cele_date(cele_date_year.value,12);
42 }
43 else
44 {cele_date_year.value=t_year;
45 set_cele_date(cele_date_year.value,cele_date_month.value);
46 }
47 }
48 }
49
50 window.cele_date.style.display="block";
51 window.cele_date.focus();
52
53}
54
55//初始化日历
56function init(d_start,d_end)
57{
58 var temp_str;
59 var i=0
60 var j=0
61 date_start=new Date(1980,7,1)
62 date_end=new Date(2004,8,1)
63 document.writeln("<div name=\"cele_date\" id=\"cele_date\" style=\"display:none\" style=\"LEFT: 69px; POSITION: absolute; TOP: 159px;Z-INDEX:99\" onClick=\"event.cancelBubble=true;\" onBlur=\"hilayer()\" onMouseout=\"lostlayerfocus()\">-</div>");
64 window.cele_date.innerHTML="";
65 temp_str="<table border=\"1\" bgcolor=\"#DDDDDD\" bordercolor=\"white\"><tr><td colspan=7 onmouseover=\"overcolor(this)\">";
66 temp_str+="<input type=\"Button\" value=\"<<\" onclick=\"change_date(-1,1)\" onmouseover=\"getlayerfocus()\" style=\"color: #000099; background-color: #BFBFBF; cursor: hand\">-";
67
68 temp_str+=""
69 temp_str+="<select name=\"cele_date_year\" id=\"cele_date_year\" language=\"javascript\" onchange=\"change_date(this.value,0)\" onmouseover=\"getlayerfocus()\" onblur=\"getlayerfocus()\" style=\"font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB\">"
70
71 for (i=2000;i<=2050;i++)
72 {
73 temp_str+="<OPTION value=\""+i.toString()+"\">"+i.toString()+"</OPTION>";
74 }
75 temp_str+="</select>-";
76 temp_str+=""
77 temp_str+="<select name=\"cele_date_month\" id=\"cele_date_month\" language=\"javascript\" onchange=\"change_date(this.value,2)\" onmouseover=\"getlayerfocus()\" onblur=\"getlayerfocus()\" style=\"font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB\">"
78
79 for (i=1;i<=12;i++)
80 {
81 temp_str+="<OPTION value=\""+i.toString()+"\">"+i.toString()+"</OPTION>";
82 }
83 temp_str+="</select>-";
84 temp_str+=""
85 temp_str+="<input type=\"Button\" value=\">>\" onclick=\"change_date(1,1)\" onmouseover=\"getlayerfocus()\" style=\"color: #000099; background-color: #BFBFBF; cursor: hand\">";
86 temp_str+="</td></tr><tr><td onmouseover=\"overcolor(this)\">"
87 temp_str+="<font color=red><bean:message key="script.Sunday"/></font></td>"
88 temp_str+="<td><bean:message key="script.Monday"/></td>"
89 temp_str+="<td><bean:message key="script.Tuesday"/></td>"
90 temp_str+="<td><bean:message key="script.Wednesday"/></td>"
91 temp_str+="<td><bean:message key="script.Thursday"/></td>"
92 temp_str+="<td><bean:message key="script.Friday"/></td>"
93 temp_str+="<td><bean:message key="script.Saturday"/></td></tr>";
94 for (i=1 ;i<=6 ;i++)
95 {
96 temp_str+="<tr>";
97 for(j=1;j<=7;j++){
98 temp_str+="<td name=\"c"+i+"_"+j+"\"id=\"c"+i+"_"+j+"\" style=\"CURSOR: hand\" style=\"COLOR:#000000\" language=\"javascript\" onmouseover=\"overcolor(this)\" onmouseout=\"outcolor(this)\" onclick=\"td_click(this)\">?</td>"
99 }
100 temp_str+="</tr>"
101 }
102 temp_str+="</td></tr></table>";
103 window.cele_date.innerHTML=temp_str;
104}
105function set_cele_date(year,month)
106{
107 var i,j,p,k
108 var nd=new Date(year,month-1,1);
109 event.cancelBubble=true;
110 cele_date_year.value=year;
111 cele_date_month.value=month;
112 k=nd.getDay()-1
113 var temp;
114 for (i=1;i<=6;i++)
115 for(j=1;j<=7;j++)
116 {
117 eval("c"+i+"_"+j+".innerHTML=\"\"");
118 eval("c"+i+"_"+j+".bgColor=\"#DDDDDD\"");
119 eval("c"+i+"_"+j+".style.cursor=\"hand\"");
120 }
121 while(month-1==nd.getMonth())
122 { j=(nd.getDay() +1);
123 p=parseInt((nd.getDate()+k) / 7)+1;
124 eval("c"+p+"_"+j+".innerHTML="+"\""+nd.getDate()+"\"");
125 if ((nd.getDate()==today.getDate())&&(cele_date_month.value==today.getMonth()+1)&&(cele_date_year.value==today.getYear())){
126 eval("c"+p+"_"+j+".bgColor=\"#EFFB64\"");
127 }
128 if (nd>date_end || nd<date_start)
129 {
130 eval("c"+p+"_"+j+".bgColor=\"#FF9999\"");
131 eval("c"+p+"_"+j+".style.cursor=\"text\"");
132 }
133 nd=new Date(nd.valueOf() + 86400000)
134 }
135}
136
137//s_object：点击的对象；d_start-d_end有效的时间区段；需要存放值的控件；
138function show_cele_date(eP,d_start,d_end,t_object)
139{
140window.cele_date.style.display="";
141window.cele_date.style.zIndex=99
142var s,cur_d
143var eT = eP.offsetTop;
144var eH = eP.offsetHeight+eT;
145var dH = window.cele_date.style.pixelHeight;
146var sT = document.body.scrollTop;
147var sL = document.body.scrollLeft;
148event.cancelBubble=true;
149window.cele_date.style.posLeft = event.clientX-event.offsetX+sL-5;
150window.cele_date.style.posTop = event.clientY-event.offsetY+eH+sT-5;
151if (window.cele_date.style.posLeft+window.cele_date.clientWidth>document.body.clientWidth) window.cele_date.style.posLeft+=eP.offsetWidth-window.cele_date.clientWidth;
152if (d_start!=""){
153 if (d_start=="today"){
154 date_start=new Date(today.getYear(),today.getMonth(),today.getDate());
155 }else{
156 s=d_start.split(separator);
157 date_start=new Date(s[0],s[1]-1,s[2]);
158 }
159}else{
160 date_start=new Date(1900,1,1);
161}
162
163if (d_end!=""){
164 s=d_end.split(separator);
165 date_end=new Date(s[0],s[1]-1,s[2]);
166}else{
167 date_end=new Date(3000,1,1);
168}
169
170g_object=t_object
171
172cur_d=new Date()
173set_cele_date(cur_d.getYear(),cur_d.getMonth()+1);
174
175window.cele_date.style.display="block";
176window.cele_date.focus();
177
178}
179function td_click(t_object)
180{
181var t_d
182if (parseInt(t_object.innerHTML,10)>=1 && parseInt(t_object.innerHTML,10)<=31 )
183{ t_d=new Date(cele_date_year.value,cele_date_month.value-1,t_object.innerHTML)
184if (t_d<=date_end && t_d>=date_start)
185{
186var year = cele_date_year.value;
187var month = cele_date_month.value;
188var day = t_object.innerHTML;
189if (parseInt(month)<10) month = "0" + month;
190if (parseInt(day)<10) day = "0" + day;
191
192g_object.value=year+separator+month+separator+day;
193window.cele_date.style.display="none";};
194}
195
196}
197function h_cele_date()
198{
199window.cele_date.style.display="none";
200}
201
202function overcolor(obj)
203{
204 if (obj.style.cursor=="hand") obj.style.color = "#FFFFFF";
205
206 inover=true;
207 window.cele_date.focus();
208
209}
210
211function outcolor(obj)
212{
213 obj.style.color = "#000000";
214 inover=false;
215
216}
217
218function getNow(o){
219 var Stamp=new Date();
220 var year = Stamp.getYear();
221 var month = Stamp.getMonth()+1;
222 var day = Stamp.getDate();
223 if(month<10){
224 month="0"+month;
225 }
226 if(day<10){
227 day="0"+day;
228 }
229 o.value=year+separator+month+separator+day;
230}
231
232function hilayer()
233{
234 if (inover==false)
235 {
236 var lay=document.all.cele_date;
237 lay.style.display="none";
238 }
239}
240function getlayerfocus()
241{
242 inover=true;
243}
244function lostlayerfocus()
245{
246 inover=false;
247}
248init();
249//日历结束 特别声明：这段JavaScript的程序并不是我写的，也是从网上copy回来，经过了自己的修改。我主要是结合了Struts的国际化，把原来的中文字都替换成<bean:message key=""/>的形式，并把该段程序放在一个jsp文件中，这样就能够实现简体、繁体和英文等多语言的变换。
在页面中是类似这样的调用：
1 <tr bgcolor="#F2F3F4">
2 <td align="left">
3 <html:radio property="timeType" value="OTHER" onclick="changeTimeType(this.form)"/><bean:message key="others"/>
4 <bean:message key="ipphone.time.from"/>
5 <html:text property="beginTime" styleClass="box2" size="10" maxlength="10" styleId="btime" onclick="show_cele_date(btime,'','',btime)" onfocus="show_cele_date(btime,'','',btime)" disabled="true"/>
6 <bean:message key="ipphone.time.to"/>
7 <html:text property="endTime" styleClass="box2" size="10" maxlength="10" styleId="etime" onclick="show_cele_date(etime,'','',etime)" onfocus="show_cele_date(etime,'','',etime)" disabled="true"/>
8 </td>
9 </tr> 显示的效果如下图：
posted on 2005-05-12 14:19
小米 阅读(1013)
评论(0) 编辑 收藏 所属分类:
其它