一个很简单的弹出式时间选择控件
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>
10
function 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>
<!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>
10
function showdb() //显示控件/隐藏空间11
{
12
var CurrentDate=new Date();13
var CYear=CurrentDate.getFullYear();14
var CMonth=CurrentDate.getMonth();15
var CDay=CurrentDate.getDay();16
17
var a=document.getElementById("input_birth");18
19
var obj_year=document.getElementById("year"); //当展开控件时自动取到当前时间（客户端）20
obj_year.innerText=CYear;21
var obj_month=document.getElementById("month");22
obj_month.innerText=CMonth+1;23
24
var s=new Date(CYear,CMonth,1);25
var startDay=s.getDay(); //日期起始数字26
var numDays=numberOfDays(CMonth,CYear); //本月天数27
var day=document.getElementsByName("day");28
for(var j=1;j<=numDays;j++) //插入日期29
{30
day[startDay+j-1].innerText=j;31
}32
33
34
if(a.style.visibility=='visible')35
{36
a.style.visibility='hidden';37
}38
else39
{40
a.style.visibility='visible';41
}42
43
44
}45
function addyear()46
{47
48
var obj_year=document.getElementById("year");49
var obj_month=document.getElementById("month");50
51
var num_year=obj_year.innerText;52
obj_year.innerText=parseInt(num_year)+1; //年数增加53
54
displayCalendar(obj_month.innerText-1,obj_year.innerText);55
56
57
58
}59
function plusyear()60
{61
62
var obj_year=document.getElementById("year");63
var obj_month=document.getElementById("month");64
65
var num_year=obj_year.innerText;66
obj_year.innerText=parseInt(num_year)-1; //年数减少67
68
displayCalendar(obj_month.innerText-1,obj_year.innerText);69
70
71
72
}73
function addmonth()74
{75
76
var obj_month=document.getElementById("month");77
var obj_year=document.getElementById("year");78
79
if(parseInt(obj_month.innerText)>=12) //月数增加到12时，年数相应增加1，月数从1开始80
{81
obj_month.innerText="0";82
obj_year=document.getElementById("year");83
var num_year=obj_year.innerText;84
obj_year.innerText=parseInt(num_year)+1;85
}86
87
var num_month=obj_month.innerText;88
obj_month.innerText=parseInt(num_month)+1; //月数增加89
90
displayCalendar(obj_month.innerText-1,obj_year.innerText);91
92
93
94
95
}96
function plusmonth()97
{98
99
var obj_month=document.getElementById("month");100
var obj_year=document.getElementById("year");101
102
if(parseInt(obj_month.innerText)<=1) //月数减少到1时，年数相应减少1，月数从12开始103
{104
obj_month.innerText="13";105
obj_year=document.getElementById("year");106
var num_year=obj_year.innerText;107
obj_year.innerText=parseInt(num_year)-1;108
}109
110
var num_month=obj_month.innerText;111
obj_month.innerText=parseInt(num_month)-1; //月数减少112
113
displayCalendar(obj_month.innerText-1,obj_year.innerText);114
115
116
117
}118
119
function numberOfDays(month,year) //取得每月天数，判断平年闰年120
{121
var numDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);122
n=numDays[month];123
if(month==1&&year%4==0) ++n;124
return n;125
}126
127
function displayCalendar(month,year)128
{129
130
var d=new Date(year,month,1);131
var startDay=d.getDay(); //日期起始数字132
var numDays=numberOfDays(month,year); //本月天数133
134
var day=document.getElementsByName("day");135
for(var i=0;i<day.length;i++)136
{137
day[i].innerText="";138
}139
for(var j=1;j<=numDays;j++) //插入日期140
{141
day[startDay+j-1].innerText=j;142
}143
144
}145
function writeDate(n)146
{147
document.writeln("<H3 ALIGN='CENTER'>"+n+"</H3>");148
}149
150
function add_day(year,month,day)151
{152
bd.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>