随笔-57  评论-202  文章-17  trackbacks-0

      以前在表单里面需要用户输入日期的时候,总是用一个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        &nbsp;&nbsp;<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>

      显示的效果如下图:
script1.GIF
posted on 2005-05-12 14:19 小米 阅读(1008) 评论(0)  编辑  收藏 所属分类: 其它

只有注册用户登录后才能发表评论。


网站导航: