1<html>
2<head>
3<title>最精致的日历式日期输入控件 (Smart Ver 1.00)</title>
4</head>
5<style>
6body
7{
8font-size:12px;
9font-family:"Tahoma";
10}
11td
12{
13font-size:12px;
14font-family:"Tahoma";
15}
16.inputdate
17{
18border:1px solid #7287c6;
19text-align: center;
20font-size: 12px;
21font-style: normal;
22height: 16px;
23}
24</style>
25<script language="JavaScript">
26<!--
27/********************************************************************
28more javascript from http://www.smallrain.net
29时间：2004-01-01
30作者：Smart
31功能：日历式日期选择控件
32
33参数：
34说明：
351.输入框直接调用用以下代码
36<Script>DateBox("InputName","DateValue")<\/Script>
37其中:InputName 为输入日期的文本框.注:不能为空.
38DateValue 为输入日期的文本框默认日期值.格式为:YYYY-MM-DD.如2004-01-01
39此值可以不填或为空.则默认值为当天日期.(客户端)
402.其它"按钮"调用用以下代码
41CallDate("InputName")
42其中:InputName 为输入日期的文本框.注:不能为空.
43修改区
44时间：
45修改人：
46原因：
47********************************************************************/
48/*基本参数*/
49var Frw=106; //日历宽度
50var Frh=137; //日历高度
51var Frs=4; //影子大小
52var Hid=true;//日历是否打开
53/*创建框架*/
54document.writeln('<Div id=Calendar Author=smart scrolling="no" frameborder=0 style="border:0px solid #EEEEEE ;position: absolute; width: '+Frw+'; height: '+Frh+'; z-index: 0; filter :\'progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#AAAAAA,strength='+Frs+')\' ;display: none"></Div>');
55/*取得今日日期*/
56function GetTodayDate()
57{
58today= new Date();
59y= today.getYear();
60m= (today.getMonth() + 1);
61if (m<10)
62{
63m='0'+m;
64}
65d= today.getDate();
66if (d<10)
67{
68d='0'+d;
69}
70return y+'-'+m+'-'+d
71}
72/*输入今天日期*/
73function SetTodayDate(InputBox)
74{
75HiddenCalendar();
76InputBox.value=GetTodayDate();
77}
78/*取某年某月第一天的星期值(月份-1)*/
79function GetFirstWeek(The_Year,The_Month)
80{
81return (new Date(The_Year,The_Month-1,1)).getDay()
82}
83/*取某年某月中总天数*/
84function GetThisDays(The_Year,The_Month)
85{
86return (new Date(The_Year,The_Month,0)).getDate()
87}
88/*取某年某月上个月中总天数*/
89function GetLastDays(The_Year,The_Month)
90{
91return (new Date(The_Year,The_Month-1,0)).getDate()
92}
93/*判断是否是闰年*/
94function RunNian(The_Year)
95{
96if ((The_Year%400==0) || ((The_Year%4==0) && (The_Year%100!=0)))
97return true;
98else
99return false;
100}
101/* 判断日期(YYYY-MM-DD)的日期是否正确 */
102function DateIsTrue(asDate){
103var lsDate = asDate + "";
104var loDate = lsDate.split("-");
105if (loDate.length!=3) return false;
106var liYear = parseFloat(loDate[0]);
107var liMonth = parseFloat(loDate[1]);
108var liDay = parseFloat(loDate[2]);
109if ((loDate[0].length>4)||(loDate[1].length>2)||(loDate[2].length>2)) return false;
110if (isNaN(liYear)||isNaN(liMonth)||isNaN(liDay)) return false;
111if ((liYear<1800)||(liYear>2500)) return false;
112if ((liMonth>12)||(liMonth<=0)) return false;
113if (GetThisDays(liYear,liMonth)<liDay) return false;
114return !isNaN(Date.UTC(liYear,liMonth,liDay));
115}
116/*取某年某月的周值*/
117function GetCountWeeks(The_Year,The_Month)
118{
119var Allday;
120Allday = 0;
121if (The_Year>2000)
122{
123
124for (i=2000 ;i<The_Year; i++)
125if (RunNian(i))
126Allday += 366;
127else
128Allday += 365;
129for (i=2; i<=The_Month; i++)
130{
131switch (i)
132{
133case 2 :
134if (RunNian(The_Year))
135Allday += 29;
136else
137Allday += 28;
138break;
139case 3 : Allday += 31; break;
140case 4 : Allday += 30; break;
141case 5 : Allday += 31; break;
142case 6 : Allday += 30; break;
143case 7 : Allday += 31; break;
144case 8 : Allday += 31; break;
145case 9 : Allday += 30; break;
146case 10 : Allday += 31; break;
147case 11 : Allday += 30; break;
148case 12 : Allday += 31; break;
149}
150}
151}
152return (Allday+6)%7;
153}
154/*输入框显示*/
155function InputValue(InputBox,Year,Month,Day)
156{
157if (Month<10)
158{
159Month='0'+Month
160}
161if (Day<10)
162{
163Day='0'+Day
164}
165InputBox.value=Year+"-"+Month+"-"+Day
166}
167//上一月
168function ForwardMonth(InputBox,Year,Month,Day)
169{
170Month=Month-1;
171if (Month<1)
172{
173Month=12;
174Year=Year-1;
175if (Year<1800)
176Year=2500;
177}
178Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
179Hid=false;
180ShowCalendar(InputBox,Year,Month,Day)
181}
182//下一月
183function NextMonth(InputBox,Year,Month,Day)
184{
185Month=Month+1;
186if (Month>12)
187{
188Month=1;
189Year=Year+1;
190if (Year>2500)
191Year=1800;
192}
193Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
194Hid=false;
195ShowCalendar(InputBox,Year,Month,Day)
196}
197//上一年
198function ForwardYear(InputBox,Year,Month,Day)
199{
200Year=Year-1;
201if (Year<1800)
202Year=2500;
203Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
204Hid=false;
205ShowCalendar(InputBox,Year,Month,Day)
206}
207//下一年
208function NextYear(InputBox,Year,Month,Day)
209{
210Year=Year+1;
211if (Year>2500)
212Year=1800;
213Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
214Hid=false;
215ShowCalendar(InputBox,Year,Month,Day)
216}
217/*其它事件显示日历*/
218function OpenDate(where)
219{
220GetCalendar(where)
221}
222/*根据输入框中的日期显示日历*/
223function GetCalendar(where)
224{
225Hid=false;
226var Box_Name=where.name;
227var Box_value=where.value;
228if (DateIsTrue(Box_value))
229{
230loDate = Box_value.split("-");
231Y= parseFloat(loDate[0]);
232M= parseFloat(loDate[1]);
233D= parseFloat(loDate[2]);
234ShowCalendar(where,Y,M,D);
235}
236else
237{
238today= new Date();
239y= today.getYear();
240m= (today.getMonth() + 1);
241d=today.getDate();
242ShowCalendar(where,y,m,d);
243}
244}
245/*隐藏日历*/
246function HiddenCalendar()
247{
248document.all.Calendar.style.display="none";
249}
250function CloseCalendar()
251{
252if (Hid)
253document.all.Calendar.style.display="none";
254Hid=true;
255}
256/*显示日历*/
257function ShowCalendar(InputBox,The_Year,The_Month,The_Day)
258{
259var Now_Year=(The_Year==null?2004:The_Year);
260var Now_Month=(The_Month==null?1:The_Month);
261var Now_Day=(The_Day==null?1:The_Day);
262var Box_Name='window.parent.document.all.'+InputBox.name;
263var fw=GetFirstWeek(Now_Year,Now_Month);
264var ld=GetLastDays(Now_Year,Now_Month);
265var td=GetThisDays(Now_Year,Now_Month);
266var isnd=false;//是否是下个月的日期
267var d=1,w=1;
268var FrameContent;
269var Frl,Frt,Winw,Winh;
270/*显示的位置*/
271Winw=document.body.offsetWidth;
272Winh=document.body.offsetHeight;
273Frl=InputBox.getBoundingClientRect().left-2;
274Frt=InputBox.getBoundingClientRect().top+InputBox.clientHeight;
275if (((Frl+Frw+Frs)>Winw)&&(Frw+Frs<Winw))
276Frl=Winw-Frw-Frs;
277if ((Frt+Frh+Frs>Winh)&&(Frh+Frs<Winh))
278Frt=Winh-Frh-Frs;
279document.all.Calendar.style.display="";
280document.all.Calendar.style.left=Frl;
281document.all.Calendar.style.top=Frt;
282//显示日历内容
283FrameContent="\n<table onselectstart=\"return false;\" border='0' cellpadding='0' cellspacing='0' bgcolor='#395592' width='100%' height='15' style=\"color:white;font-weight:bolder;border:0px solid\">"+"\n<tr>\n";
284FrameContent+="<td width=8>";
285FrameContent+="<img src='inc/-.gif' width='8' height='11' border='0' alt='上一年' style='cursor:hand' onclick=\"parent.ForwardYear (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")\">";
286FrameContent+="</td>\n";
287FrameContent+="<td vAlign=middle align='center'>";
288FrameContent+=Now_Year;
289FrameContent+="年";
290FrameContent+="</td>\n";
291FrameContent+="<td width=8>";
292FrameContent+="<img src='inc/+.gif' width='8' height='11' border='0' alt='下一年' style='cursor:hand' onclick=\"parent.NextYear (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")\">";
293FrameContent+="</td>\n";
294FrameContent+="<td width=8>";
295FrameContent+="<img src='inc/-.gif' width='8' height='11' border='0' alt='上一月' style='cursor:hand' onclick=\"parent.ForwardMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")\">";
296FrameContent+="</td>\n";
297FrameContent+="<td vAlign=middle align='center' width='16'>";
298FrameContent+=Now_Month;
299FrameContent+="</td>\n";
300FrameContent+="<td vAlign=middle align='center' width='13'>";
301FrameContent+="月";
302FrameContent+="</td>\n";
303FrameContent+="<td width=8>";
304FrameContent+="<img src='inc/+.gif' width='8' height='11' border='0' alt='下一月' style='cursor:hand' onclick=\"parent.NextMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")\">";
305FrameContent+="</td>"+"\n";
306FrameContent+="</tr>"+"\n";
307FrameContent+="</table>"+"\n";
308FrameContent+="<table onselectstart=\"return false;\" border='0' cellpadding='0' cellspacing='1' width='100%' bgcolor='#CCCCCC'>"+"\n";
309FrameContent+="<tr bgcolor='#F5F5F5'>"+"\n";
310FrameContent+="<td><center>一</center></td>"+"\n";
311FrameContent+="<td><center>二</center></td>"+"\n";
312FrameContent+="<td><center>三</center></td>"+"\n";
313FrameContent+="<td><center>四</center></td>"+"\n";
314FrameContent+="<td><center>五</center></td>"+"\n";
315FrameContent+="<td><center>六</center></td>"+"\n";
316FrameContent+="<td><center><font color='#FF0000'>日</font></center></td>"+"\n";
317FrameContent+="</tr>"+"\n";
318//如果本月第一天是星期一或星期天.应加上七.保证可以看到上个月的日期
319if (fw<2)
320tf=fw+7;
321else
322tf=fw;
323FrameContent+="<tr bgcolor='#FFFFFF'>"+"\n";
324//第一行上月日期
325for (l=(ld-tf+2);l<=ld;l++)
326{
327FrameContent+="<td onclick=\"parent.ForwardMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+l+")\" style='cursor:hand'><center><font color='#BBBBBB'>"+l+"</font></center></td>"+"\n";
328w++;
329}
330//第一行本月日期
331for (f=tf;f<=7;f++)
332{
333//星期天但非输入日期
334if (((w%7)==0)&&(d!=Now_Day))
335FrameContent+="<td onMouseOver=\"this.style.background=\'#E1E1E1\'\" onMouseOut=\"this.style.background=\'#FFFFFF\'\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\" style='cursor:hand'><center><font color='#FF0000'>"+d+"</font></center></td>"+"\n";
336//日期为输入日期
337else if (d==Now_Day)
338FrameContent+="<td style=\"background:#420042;cursor:hand\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\"><center><font color='#FFFFFF'>"+d+"</font></center></td>"+"\n";
339//其它
340else
341FrameContent+="<td onMouseOver=\"this.style.background=\'#E1E1E1\'\" onMouseOut=\"this.style.background=\'#FFFFFF\'\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\" style='cursor:hand'><center>"+d+"</center></td>"+"\n";
342d++;
343w++;
344}
345FrameContent+="</tr>"+"\n";
346w=1;
347for (i=2;i<7;i++)
348{
349FrameContent+="<tr bgcolor='#FFFFFF'>"+"\n";
350for (j=1;j<8;j++)
351{
352if (isnd)//下个月的日期
353FrameContent+="<td style='cursor:hand' onclick=\"parent.NextMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+")\"><center><font color='#BBBBBB'>"+d+"</font></center></td>"+"\n";
354else//本月的日期
355{
356//星期天但非输入日期
357if (((w%7)==0)&&(d!=Now_Day))
358FrameContent+="<td onMouseOver=\"this.style.background=\'#E1E1E1\'\" onMouseOut=\"this.style.background=\'#FFFFFF\'\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\" style='cursor:hand'><center><font color='#FF0000'>"+d+"</font></center></td>"+"\n";
359//日期为输入日期
360else if (d==Now_Day)
361FrameContent+="<td style=\"background:#420042;cursor:hand\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\"><center><font color='#FFFFFF'>"+d+"</font></center></td>"+"\n";
362//其它
363else
364FrameContent+="<td onMouseOver=\"this.style.background=\'#E1E1E1\'\" onMouseOut=\"this.style.background=\'#FFFFFF\'\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\" style='cursor:hand'><center>"+d+"</center></td>"+"\n";
365}
366//判断是否为本月的日期
367if (d==td)
368{
369isnd=true;
370d=0;
371}
372w++;
373d++;
374}
375FrameContent+="</tr>"+"\n";
376}
377FrameContent+="</table>"+"\n";
378FrameContent+="<table onselectstart=\"return false;\" cellpadding='0' cellspacing='0' bgcolor='#F5F5F5' width='100%' height='15'>"+"\n<tr>\n";
379FrameContent+="<td title=\"今日:"+GetTodayDate()+"\" style=\"cursor:hand\" onclick=\"parent.SetTodayDate(window.parent.document.all."+InputBox.name+")\">";
380FrameContent+="<font color=red>今日:</font>"+GetTodayDate();
381FrameContent+="</td>\n";
382FrameContent+="<td>";
383FrameContent+="<img src='inc/close.gif' width='13' height='13' border='0' alt='关闭' style='cursor:hand' onclick=\"parent.HiddenCalendar()\">";
384FrameContent+="</td>\n";
385FrameContent+="</tr>\n";
386document.all.Calendar.innerHTML=FrameContent;
387document.all.Calendar.style.display="";
388}
389/*显示输入框*/
390function DateBox(sBoxName, sDfltValue)
391{
392if (sBoxName==null)
393sBoxName='Date_Box'
394if ((sDfltValue==null)||!(DateIsTrue(sDfltValue)))
395sDfltValue= GetTodayDate()
396else
397{
398DateStr = sDfltValue.split("-");
399Y= parseFloat(DateStr[0]);
400M= (parseFloat(DateStr[1])<10)?('0'+parseFloat(DateStr[1])):parseFloat(DateStr[1]);
401D= (parseFloat(DateStr[2])<10)?('0'+parseFloat(DateStr[2])):parseFloat(DateStr[2]);
402sDfltValue=Y+'-'+M+'-'+D
403}
404document.write("<input size='10' readonly class='inputdate' name='"+sBoxName+"' value='"+sDfltValue+"' onclick='GetCalendar(window.document.all."+sBoxName+")' >");
405}
406document.onclick = CloseCalendar;
407//-->
408</script>
409<body leftmargin="0" topmargin="0">
410点击输入框调用日历.<script>DateBox("Test1")</script>
411
412<script>DateBox("Test2","2004-01-01")</script>
413 其它事件调用日历.
414<input class="inputdate" name="Test3" readonly="" size="10" type="text"/>
415<input class="inputdate" onclick="OpenDate(Test3)" type="button" value="显示日历"/>
416</body>
417</html>
最精致的日历式日期输入控件
comments powered by Disqus