一个很简单的弹出式时间选择控件
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML>
3<HEAD>
4<TITLE> New Document </TITLE>
5<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
6<META NAME="Author" CONTENT="zhaoweiwei">
7<META NAME="Keywords" CONTENT="birthday_input">
8<META NAME="Description" CONTENT="日起输入控件">
9<script>
10function showdb() //显示控件/隐藏空间
11{
12var CurrentDate=new Date();
13var CYear=CurrentDate.getFullYear();
14var CMonth=CurrentDate.getMonth();
15var CDay=CurrentDate.getDay();
16
17var a=document.getElementById("input_birth");
18
19var obj_year=document.getElementById("year"); //当展开控件时自动取到当前时间(客户端)
20obj_year.innerText=CYear;
21var obj_month=document.getElementById("month");
22obj_month.innerText=CMonth+1;
23
24var s=new Date(CYear,CMonth,1);
25var startDay=s.getDay(); //日期起始数字
26var numDays=numberOfDays(CMonth,CYear); //本月天数
27var day=document.getElementsByName("day");
28for(var j=1;j<=numDays;j++) //插入日期
29{
30day[startDay+j-1].innerText=j;
31}
32
33
34if(a.style.visibility=='visible')
35{
36a.style.visibility='hidden';
37}
38else
39{
40a.style.visibility='visible';
41}
42
43
44}
45function addyear()
46{
47
48var obj_year=document.getElementById("year");
49var obj_month=document.getElementById("month");
50
51var num_year=obj_year.innerText;
52obj_year.innerText=parseInt(num_year)+1; //年数增加
53
54displayCalendar(obj_month.innerText-1,obj_year.innerText);
55
56
57
58}
59function plusyear()
60{
61
62var obj_year=document.getElementById("year");
63var obj_month=document.getElementById("month");
64
65var num_year=obj_year.innerText;
66obj_year.innerText=parseInt(num_year)-1; //年数减少
67
68displayCalendar(obj_month.innerText-1,obj_year.innerText);
69
70
71
72}
73function addmonth()
74{
75
76var obj_month=document.getElementById("month");
77var obj_year=document.getElementById("year");
78
79if(parseInt(obj_month.innerText)>=12) //月数增加到12时,年数相应增加1,月数从1开始
80{
81obj_month.innerText="0";
82obj_year=document.getElementById("year");
83var num_year=obj_year.innerText;
84obj_year.innerText=parseInt(num_year)+1;
85}
86
87var num_month=obj_month.innerText;
88obj_month.innerText=parseInt(num_month)+1; //月数增加
89
90displayCalendar(obj_month.innerText-1,obj_year.innerText);
91
92
93
94
95}
96function plusmonth()
97{
98
99var obj_month=document.getElementById("month");
100var obj_year=document.getElementById("year");
101
102if(parseInt(obj_month.innerText)<=1) //月数减少到1时,年数相应减少1,月数从12开始
103{
104obj_month.innerText="13";
105obj_year=document.getElementById("year");
106var num_year=obj_year.innerText;
107obj_year.innerText=parseInt(num_year)-1;
108}
109
110var num_month=obj_month.innerText;
111obj_month.innerText=parseInt(num_month)-1; //月数减少
112
113displayCalendar(obj_month.innerText-1,obj_year.innerText);
114
115
116
117}
118
119function numberOfDays(month,year) //取得每月天数,判断平年闰年
120{
121var numDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
122n=numDays[month];
123if(month==1&&year%4==0) ++n;
124return n;
125}
126
127function displayCalendar(month,year)
128{
129
130var d=new Date(year,month,1);
131var startDay=d.getDay(); //日期起始数字
132var numDays=numberOfDays(month,year); //本月天数
133
134var day=document.getElementsByName("day");
135for(var i=0;i<day.length;i++)
136{
137day[i].innerText="";
138}
139for(var j=1;j<=numDays;j++) //插入日期
140{
141day[startDay+j-1].innerText=j;
142}
143
144}
145function writeDate(n)
146{
147document.writeln("<H3 ALIGN='CENTER'>"+n+"</H3>");
148}
149
150function add_day(year,month,day)
151{
152bd.birthdate.value=year+"-"+month+"-"+day;
153}
154</script>
155</HEAD>
156
157
158<BODY>
159<form name="bd">
160<input type="text" name="birthdate" size="20" readOnly><input type="button" value="" onclick="showdb()">
161</form>
162<div id="input_birth" name="input_birth" style="visibility:hidden; width:239; height:128">
163<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" style="cursor:hand" bordercolor="#111111" width="100%" height="26">
164<tr>
165<td width="100%" colspan="3" height="26"> <input type="button" value="<<" onclick="plusyear()" name="plusyear">
166<input type="button" value="<" onclick="plusmonth()" name="plusmonth"> <font id="year">
167</font>年<font id="month"></font>月
168<input type="button" value=">" onclick="addmonth()" name="addmonth">
169<input type="button" value=">>" name="addyear" onclick="addyear()"></td>
170</tr>
171<tr>
172<td width="100%" colspan="3" height="119" valign="top">
173<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
174<tr>
175<td width="14%" align="center"><b><font color="#FF0000">日</font></b></td>
176<td width="14%" align="center"><b>一</b></td>
177<td width="14%" align="center"><b>二</b></td>
178<td width="14%" align="center"><b>三</b></td>
179<td width="14%" align="center"><b>四</b></td>
180<td width="15%" align="center"><b>五</b></td>
181<td width="15%" align="center"><b><font color="#FF0000">六</font></b></td>
182</tr>
183<tr>
184<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"></td>
185<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
186<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
187<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
188<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
189<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
190<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
191</tr>
192<tr>
193<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
194<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
195<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
196<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
197<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
198<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
199<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
200</tr>
201<tr>
202<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
203<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
204<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
205<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
206<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
207<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
208<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
209</tr>
210<tr>
211<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
212<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
213<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
214<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
215<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
216<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
217<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
218</tr>
219<tr>
220<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
221<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
222<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
223<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
224<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
225<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
226<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
227</tr>
228<tr>
229<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
230<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
231<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
232<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
233<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
234<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
235<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
236</tr>
237</table>
238</td>
239</tr>
240<tr>
241<td width="33%" height="1"></td>
242<td width="33%" height="1"></td>
243<td width="34%" height="1"></td>
244</tr>
245</table>
246</div>
247</BODY>
248</HTML>
2<HTML>
3<HEAD>
4<TITLE> New Document </TITLE>
5<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
6<META NAME="Author" CONTENT="zhaoweiwei">
7<META NAME="Keywords" CONTENT="birthday_input">
8<META NAME="Description" CONTENT="日起输入控件">
9<script>
10function showdb() //显示控件/隐藏空间
11{
12var CurrentDate=new Date();
13var CYear=CurrentDate.getFullYear();
14var CMonth=CurrentDate.getMonth();
15var CDay=CurrentDate.getDay();
16
17var a=document.getElementById("input_birth");
18
19var obj_year=document.getElementById("year"); //当展开控件时自动取到当前时间(客户端)
20obj_year.innerText=CYear;
21var obj_month=document.getElementById("month");
22obj_month.innerText=CMonth+1;
23
24var s=new Date(CYear,CMonth,1);
25var startDay=s.getDay(); //日期起始数字
26var numDays=numberOfDays(CMonth,CYear); //本月天数
27var day=document.getElementsByName("day");
28for(var j=1;j<=numDays;j++) //插入日期
29{
30day[startDay+j-1].innerText=j;
31}
32
33
34if(a.style.visibility=='visible')
35{
36a.style.visibility='hidden';
37}
38else
39{
40a.style.visibility='visible';
41}
42
43
44}
45function addyear()
46{
47
48var obj_year=document.getElementById("year");
49var obj_month=document.getElementById("month");
50
51var num_year=obj_year.innerText;
52obj_year.innerText=parseInt(num_year)+1; //年数增加
53
54displayCalendar(obj_month.innerText-1,obj_year.innerText);
55
56
57
58}
59function plusyear()
60{
61
62var obj_year=document.getElementById("year");
63var obj_month=document.getElementById("month");
64
65var num_year=obj_year.innerText;
66obj_year.innerText=parseInt(num_year)-1; //年数减少
67
68displayCalendar(obj_month.innerText-1,obj_year.innerText);
69
70
71
72}
73function addmonth()
74{
75
76var obj_month=document.getElementById("month");
77var obj_year=document.getElementById("year");
78
79if(parseInt(obj_month.innerText)>=12) //月数增加到12时,年数相应增加1,月数从1开始
80{
81obj_month.innerText="0";
82obj_year=document.getElementById("year");
83var num_year=obj_year.innerText;
84obj_year.innerText=parseInt(num_year)+1;
85}
86
87var num_month=obj_month.innerText;
88obj_month.innerText=parseInt(num_month)+1; //月数增加
89
90displayCalendar(obj_month.innerText-1,obj_year.innerText);
91
92
93
94
95}
96function plusmonth()
97{
98
99var obj_month=document.getElementById("month");
100var obj_year=document.getElementById("year");
101
102if(parseInt(obj_month.innerText)<=1) //月数减少到1时,年数相应减少1,月数从12开始
103{
104obj_month.innerText="13";
105obj_year=document.getElementById("year");
106var num_year=obj_year.innerText;
107obj_year.innerText=parseInt(num_year)-1;
108}
109
110var num_month=obj_month.innerText;
111obj_month.innerText=parseInt(num_month)-1; //月数减少
112
113displayCalendar(obj_month.innerText-1,obj_year.innerText);
114
115
116
117}
118
119function numberOfDays(month,year) //取得每月天数,判断平年闰年
120{
121var numDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
122n=numDays[month];
123if(month==1&&year%4==0) ++n;
124return n;
125}
126
127function displayCalendar(month,year)
128{
129
130var d=new Date(year,month,1);
131var startDay=d.getDay(); //日期起始数字
132var numDays=numberOfDays(month,year); //本月天数
133
134var day=document.getElementsByName("day");
135for(var i=0;i<day.length;i++)
136{
137day[i].innerText="";
138}
139for(var j=1;j<=numDays;j++) //插入日期
140{
141day[startDay+j-1].innerText=j;
142}
143
144}
145function writeDate(n)
146{
147document.writeln("<H3 ALIGN='CENTER'>"+n+"</H3>");
148}
149
150function add_day(year,month,day)
151{
152bd.birthdate.value=year+"-"+month+"-"+day;
153}
154</script>
155</HEAD>
156
157
158<BODY>
159<form name="bd">
160<input type="text" name="birthdate" size="20" readOnly><input type="button" value="" onclick="showdb()">
161</form>
162<div id="input_birth" name="input_birth" style="visibility:hidden; width:239; height:128">
163<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" style="cursor:hand" bordercolor="#111111" width="100%" height="26">
164<tr>
165<td width="100%" colspan="3" height="26"> <input type="button" value="<<" onclick="plusyear()" name="plusyear">
166<input type="button" value="<" onclick="plusmonth()" name="plusmonth"> <font id="year">
167</font>年<font id="month"></font>月
168<input type="button" value=">" onclick="addmonth()" name="addmonth">
169<input type="button" value=">>" name="addyear" onclick="addyear()"></td>
170</tr>
171<tr>
172<td width="100%" colspan="3" height="119" valign="top">
173<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
174<tr>
175<td width="14%" align="center"><b><font color="#FF0000">日</font></b></td>
176<td width="14%" align="center"><b>一</b></td>
177<td width="14%" align="center"><b>二</b></td>
178<td width="14%" align="center"><b>三</b></td>
179<td width="14%" align="center"><b>四</b></td>
180<td width="15%" align="center"><b>五</b></td>
181<td width="15%" align="center"><b><font color="#FF0000">六</font></b></td>
182</tr>
183<tr>
184<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"></td>
185<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
186<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
187<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
188<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
189<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
190<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
191</tr>
192<tr>
193<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
194<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
195<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
196<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
197<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
198<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
199<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
200</tr>
201<tr>
202<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
203<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
204<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
205<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
206<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
207<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
208<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
209</tr>
210<tr>
211<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
212<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
213<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
214<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
215<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
216<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
217<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
218</tr>
219<tr>
220<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
221<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
222<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
223<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
224<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
225<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
226<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
227</tr>
228<tr>
229<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
230<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
231<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
232<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
233<td width="14%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
234<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
235<td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)"> </td>
236</tr>
237</table>
238</td>
239</tr>
240<tr>
241<td width="33%" height="1"></td>
242<td width="33%" height="1"></td>
243<td width="34%" height="1"></td>
244</tr>
245</table>
246</div>
247</BODY>
248</HTML>