用JavaScript控制日期和时间输入

在Web项目中或多或少的会要求用户输入日期或时间，对于日期，可以使用日历这个服务器控件，但既然是服务器控件，就会有性能上开销，而且对于输入年月（不是年月日）格式还要修改日历控件。在这里，介绍一段JavaScript代码，可以有效地输入日期和时间。

日期代码：

日期输入
  1 /*
  2 * 限制输入的日期控件
  3 * Param: txtName 为要限制输入的文本框的名称
  4 *
  5 * 功能描述：1，只能输入数字
  6 *           2，左右键可以移动编辑焦点
  7 *           3，上下键可以对数据进行微调
  8 *           4，控件包含了对日期的合法校验
  9 */
 10 function regDateControl(txtName,length)
 11 {//length=7表示年月，length=10表示年月日
 12     var oInput = document.getElementById(txtName);
 13     oInput.middleChar = "-";//分隔符
 14     oInput.selectIndex = 1; //默认选中年
 15     oInput.maxLength = length;
 16     oInput.style.imeMode = "disabled";
 17     oInput.charWidth = oInput.createTextRange().boundingWidth / oInput.maxLength;
 18 
 19     //注册单击事件
 20     oInput.onclick = specialText_ClickEvent;
 21     oInput.onkeydown = specialText_KeyDownEvent;
 22     oInput.onfocus = function(){specialText_SelectYear(this);}
 23     oInput.onblur = function()
 24     {
 25         specialText_validYear(this);
 26         specialText_validMonth(this);
 27         if (this.maxLength==10)
 28              specialText_validDate(this);
 29     }
 30     //屏蔽鼠标右键和拖动操作
 31     oInput.oncontextmenu = function(){return false;}
 32     oInput.ondrop = function(){return false;}
 33 }
 34 
 35 //鼠标单击，根据位置对日期进行分体选择
 36 function specialText_ClickEvent()
 37 {
 38     event.cancelBubble = true;
 39     specialText_validYear(this);
 40     specialText_validMonth(this);
 41     if (this.maxLength==10)
 42         specialText_validDate(this);
 43     if(event.offsetX <= specialText_getCharWidth(this.charWidth,4))
 44         specialText_SelectYear(this);
 45     else if(event.offsetX > specialText_getCharWidth(this.charWidth,4)
 46             && event.offsetX <= specialText_getCharWidth(this.charWidth,7))
 47         specialText_SelectMonth(this);
 48     else if (this.maxLength==10)
 49     {if(event.offsetX > specialText_getCharWidth(this.charWidth,7))
 50         specialText_SelectDate(this);
 51         }
 52 }
 53 //选中年份
 54 function specialText_SelectYear(oInput)
 55 {
 56     var t=0;
 57     if (oInput.maxLength==10)
 58         t=3;
 59     var oRange = oInput.createTextRange();
 60     oRange.moveStart("character",0);
 61     oRange.moveEnd("character",-3-t);
 62     //代表选中了年
 63     oInput.selectIndex = 1;
 64     oRange.select();
 65 }
 66 //选中月份
 67 function specialText_SelectMonth(oInput)
 68 {
 69     var t=0;
 70     if (oInput.maxLength==10)
 71         t=3;
 72     var oRange = oInput.createTextRange();
 73     oRange.moveStart("character",5);
 74     oRange.moveEnd("character",0-t);
 75     //代表选中了月
 76     oInput.selectIndex = 2;
 77     oRange.select();
 78 }
 79 //选中日期
 80 function specialText_SelectDate(oInput)
 81 {
 82     var oRange = oInput.createTextRange();
 83     oRange.moveStart("character",8);
 84     oRange.moveEnd("character",0);
 85     //代表选中了日期
 86     oInput.selectIndex = 3;
 87     oRange.select();
 88 }
 89 //校验年份有效性
 90 function specialText_validYear(oInput)
 91 {
 92     var arrValue = oInput.value.split(oInput.middleChar);
 93     var strYear = arrValue[0];
 94     if(parseInt(strYear,10) == 0)
 95         arrValue[0] = 2000;//默认2000
 96     //如果年份小于4位，则在2000基础上增加
 97     else if(strYear.length < 4)
 98         arrValue[0] = 2000 + parseInt(strYear,10);
 99     oInput.value = arrValue.join(oInput.middleChar);
100 }
101 //校验月份有效性
102 function specialText_validMonth(oInput)
103 {
104     var arrValue = oInput.value.split(oInput.middleChar);
105     var strMonth = arrValue[1];
106     //如果月份输入了0，则按1月处理
107     if(parseInt(strMonth,10) == 0)
108          arrValue[1] = "01";
109     //如果月份是一位，则前面补0
110     else if(strMonth.length < 2)
111         arrValue[1] = "0" + strMonth;
112     //如果月份大于12月，自动转为12月
113     else if(parseInt(strMonth,10) > 12)
114         arrValue[1] = "12";
115     oInput.value = arrValue.join(oInput.middleChar);
116 }
117 //校验日期有效性
118 function specialText_validDate(oInput)
119 {
120     var arrValue = oInput.value.split(oInput.middleChar);
121     var strYear = arrValue[0];
122     var strMonth = arrValue[1];
123     var strDate = arrValue[2];
124     var intMonth = parseInt(strMonth,10);
125     if(parseInt(strDate,10) == 0)
126         arrValue[2] = "01";
127     else if(strDate.length < 2)
128         arrValue[2] = "0" + strDate;
129     else
130     {
131         //如果超过了月份的最大天数，则置为最大天数
132         var monthMaxDates = specialText_getMonthDates(strYear,strMonth);
133         if(parseInt(strDate,10) > monthMaxDates)
134             arrValue[2] = monthMaxDates;
135     }
136     oInput.value = arrValue.join(oInput.middleChar);
137 }
138 
139 function specialText_YearAdd(oInput,isMinus)
140 {
141     var arrValue = oInput.value.split(oInput.middleChar);
142     var strYear = arrValue[0];
143     if(isMinus)
144     {
145         arrValue[0] = parseInt(strYear,10) - 1;
146         if(parseInt(arrValue[0],10) < 1)
147             arrValue[0] = "0001";
148     }
149     else
150         arrValue[0] = parseInt(strYear,10) + 1;
151     oInput.value = arrValue.join(oInput.middleChar);
152     specialText_validYear(oInput);
153     specialText_SelectYear(oInput);
154 }
155 function specialText_MonthAdd(oInput,isMinus)
156 {
157     var arrValue = oInput.value.split(oInput.middleChar);
158     var strMonth = arrValue[1];
159     if(isMinus)
160     {
161         arrValue[1] = parseInt(strMonth,10) - 1;
162         if(parseInt(arrValue[1],10) == 0)
163             arrValue[1] = "12";
164     }
165     else
166     {
167         arrValue[1] = parseInt(strMonth,10) + 1;
168         if(parseInt(arrValue[1],10) == 13)
169             arrValue[1] = "01";
170     }
171     oInput.value = arrValue.join(oInput.middleChar);
172     specialText_validMonth(oInput);
173     specialText_SelectMonth(oInput);
174 }
175 function specialText_DateAdd(oInput,isMinus)
176 {
177     var arrValue = oInput.value.split(oInput.middleChar);
178     var strYear = arrValue[0];
179     var strMonth = arrValue[1];
180     var strDate = arrValue[2];
181     var monthMaxDates = specialText_getMonthDates(strYear,strMonth);
182 
183     if(isMinus)
184     {
185         arrValue[2] = parseInt(strDate,10) - 1;
186         if(parseInt(arrValue[2],10) == 0)
187             arrValue[2] = monthMaxDates;
188     }
189     else
190     {
191         arrValue[2] = parseInt(strDate,10) + 1;
192         if(parseInt(arrValue[2],10) == (monthMaxDates + 1))
193             arrValue[2] = "01";
194     }
195     oInput.value = arrValue.join(oInput.middleChar);
196     specialText_validDate(oInput);
197     specialText_SelectDate(oInput);
198 }
199 function specialText_KeyDownEvent()
200 {
201     //如果按了数字键
202     if((event.keyCode >= 48 && event.keyCode <= 57) ||
203        (event.keyCode >= 96 && event.keyCode <= 105))
204     {     
205         var oRange = document.selection.createRange();
206         if(oRange.text.indexOf(this.middleChar) != -1)
207             event.returnValue = false;
208         else
209             event.returnValue = true;
210     }
211     //如果按了方向键
212     else if(event.keyCode >= 37 && event.keyCode <= 40)
213     {
214         event.returnValue = false;
215         var keyCode = event.keyCode;
216         //按了左键
217         if(keyCode == 37)
218         {
219             if (this.maxLength==10)
220             {
221                 if(this.selectIndex == 1)
222                 {
223                     specialText_validYear(this);
224                     specialText_SelectDate(this);
225                 }
226                 else if(this.selectIndex == 2)
227                 {
228                     specialText_validMonth(this);
229                     specialText_SelectYear(this);
230                 }
231                 else if(this.selectIndex == 3)
232                 {
233                     specialText_validDate(this);
234                     specialText_SelectMonth(this);
235                 }
236             }
237             else
238             {
239                 if(this.selectIndex == 1)
240                 {
241                     specialText_validYear(this);
242                     specialText_SelectMonth(this);
243                 }
244                 else if(this.selectIndex == 2)
245                 {
246                     specialText_validMonth(this);
247                     specialText_SelectYear(this);
248                 }
249             }
250             
251         }
252         //按了右键
253         if(keyCode == 39)
254         {
255             if (this.maxLength==10)
256             {
257                 if(this.selectIndex == 1)
258                 {
259                     specialText_validYear(this);
260                     specialText_SelectMonth(this);
261                 }
262                 else if(this.selectIndex == 2)
263                 {
264                     specialText_validMonth(this);
265                     specialText_SelectDate(this);
266                 }
267                 else if(this.selectIndex == 3)
268                 {
269                     specialText_validDate(this);
270                     specialText_SelectYear(this);
271                 }
272             }
273             else
274             {
275                 if(this.selectIndex == 1)
276                 {
277                     specialText_validYear(this);
278                     specialText_SelectMonth(this);
279                 }
280                 else if(this.selectIndex == 2)
281                 {
282                     specialText_validMonth(this);
283                     specialText_SelectYear(this);
284                 }
285             }
286         }
287         //按了上键
288         if(keyCode == 38)
289         {
290             if(this.selectIndex == 1)
291             {
292                 specialText_validYear(this);
293                 specialText_YearAdd(this,true);
294             }
295             else if(this.selectIndex == 2)
296             {
297                 specialText_validMonth(this);
298                 specialText_MonthAdd(this,true);
299             }
300             else if(this.selectIndex == 3)
301             {
302                 if (this.maxLength==10)
303                 {
304                     specialText_validDate(this);
305                     specialText_DateAdd(this,true);
306                 }
307             }
308         }
309 
310         //按了下键
311         if(keyCode == 40)
312         {
313             if(this.selectIndex == 1)
314             {
315                 specialText_validYear(this);
316                 specialText_YearAdd(this,false);
317             }
318             else if(this.selectIndex == 2)
319             {
320                 specialText_validMonth(this);
321                 specialText_MonthAdd(this,false);
322             }
323             else if(this.selectIndex == 3)
324             {
325                 if (this.maxLength==10)
326                 {
327                     specialText_validDate(this);
328                     specialText_DateAdd(this,false);
329                 }
330             }
331         }
332     }
333     //如果按了F5 或 TAB，不屏蔽
334     else if(event.keyCode == 116 || event.keyCode == 9)
335         event.returnValue = true;
336     else
337     {
338         event.returnValue = false;
339         event.keyCode = 0;
340     }
341 }
342 
343 
344 
345 
346 /*---------------------辅助函数-----------------------*/
347 //得到默认三日期
348 function specialText_GetDate(middleChar)
349 {
350     var oDate = new Date();
351     return oDate.getYear() + middleChar
352            + (oDate.getMonth() < 10 ? ("0" + oDate.getMonth()) : oDate.getMonth()) + middleChar
353            + (oDate.getDate() < 10 ? ("0" + oDate.getDate()) : oDate.getDate());
354 }
355 //得到字符像素宽度
356 function specialText_getCharWidth(charWidth,charNum)
357 {
358     return charNum * charWidth;
359 }
360 //得到某年某月的最大天数
361 function specialText_getMonthDates(strYear,strMonth)
362 {
363     var intMonth = parseInt(strMonth,10);
364     if(intMonth == 1 || intMonth == 3 || intMonth == 5 || intMonth == 7
365        || intMonth == 8 || intMonth == 10 || intMonth == 12)
366         return 31;
367     //处理30天的月份
368     else if(intMonth == 4 || intMonth == 6 || intMonth == 9 || intMonth == 11)
369         return 30;
370     //处理2月份
371     else
372     {
373         //闰年
374         if(specialText_isLeapYear(strYear))
375             return 29;
376         //平年
377         else
378             return 28;
379     }
380 }
381 //判断是否是闰年
382 function specialText_isLeapYear(strYear)
383 {
384     var intYear = parseInt(strYear,10);
385     if((intYear % 4 == 0 && intYear % 100 != 0) ||
386        (intYear % 100 == 0 && intYear % 400 == 0))
387         return true;
388     else
389         return false;
390 }
391 

时间代码：

时间输入
  1 
  2 /*--------------------------------------------------------------------------------------------------*/
  3 /*
  4 * 限制输入的时间控件
  5 * Param: txtName 为要限制输入的文本框的名称
  6 *
  7 * 功能描述：1，只能输入数字
  8 *           2，左右键可以移动编辑焦点
  9 *           3，上下键可以对数据进行微调
 10 *           4，控件包含了对时间的合法校验
 11 */
 12 function regTimeControl(txtName)
 13 {
 14     var oInput = document.getElementById(txtName);
 15     oInput.middleChar = ":";
 16     oInput.selectIndex = 1; //默认选中时
 17     oInput.maxLength = 8;
 18     oInput.style.imeMode = "disabled";
 19     oInput.charWidth = oInput.createTextRange().boundingWidth / oInput.maxLength;
 20 
 21     //注册单击事件
 22     oInput.onclick = specialText_TimeClickEvent;
 23     oInput.onkeydown = specialText_TimeKeyDownEvent;
 24     oInput.onfocus = function(){specialText_SelectHour(this);}
 25     oInput.onblur = function()
 26     {
 27         specialText_validHour(this);
 28         specialText_validMinute(this);
 29         specialText_validSecond(this);
 30     }
 31     //屏蔽鼠标右键和拖动操作
 32     oInput.oncontextmenu = function(){return false;}
 33     oInput.ondrop = function(){return false;}
 34 }
 35 
 36 //鼠标单击，根据位置对时间进行分体选择
 37 function specialText_TimeClickEvent()
 38 {
 39     event.cancelBubble = true;
 40     specialText_validHour(this);
 41     specialText_validMinute(this);
 42     specialText_validSecond(this);
 43     if(event.offsetX <= specialText_getCharWidth(this.charWidth,2))
 44         specialText_SelectHour(this);
 45     else if(event.offsetX > specialText_getCharWidth(this.charWidth,2)
 46             && event.offsetX <= specialText_getCharWidth(this.charWidth,5))
 47         specialText_SelectMinute(this);
 48     if(event.offsetX > specialText_getCharWidth(this.charWidth,7))
 49         specialText_SelectSecond(this);
 50 }
 51 
 52 function specialText_SelectHour(oInput)
 53 {
 54     var oRange = oInput.createTextRange();
 55     oRange.moveStart("character",0);
 56     oRange.moveEnd("character",-6);
 57     oInput.selectIndex = 1;
 58     oRange.select();
 59 }
 60 function specialText_SelectMinute(oInput)
 61 {
 62     var oRange = oInput.createTextRange();
 63     oRange.moveStart("character",3);
 64     oRange.moveEnd("character",-3);
 65     oInput.selectIndex = 2;
 66     oRange.select();
 67 }
 68 function specialText_SelectSecond(oInput)
 69 {
 70     var oRange = oInput.createTextRange();
 71     oRange.moveStart("character",6);
 72     oRange.moveEnd("character",0);
 73     oInput.selectIndex = 3;
 74     oRange.select();
 75 }
 76 function specialText_validHour(oInput)
 77 {
 78     var arrValue = oInput.value.split(oInput.middleChar);
 79     var strHour = arrValue[0];
 80 
 81     if(strHour.length < 2)
 82         arrValue[0] = "0" + parseInt(strHour,10);
 83     else if(parseInt(strHour,10)>23)
 84         arrValue[0] = "00";
 85     oInput.value = arrValue.join(oInput.middleChar);
 86 }
 87 function specialText_validMinute(oInput)
 88 {
 89     var arrValue = oInput.value.split(oInput.middleChar);
 90     var strMinute = arrValue[1];
 91     if(strMinute.length < 2)
 92         arrValue[1] = "0" + strMinute;
 93     else if(parseInt(strMinute,10) > 59)
 94         arrValue[1] = "00";
 95     oInput.value = arrValue.join(oInput.middleChar);
 96 }
 97 function specialText_validSecond(oInput)
 98 {
 99     var arrValue = oInput.value.split(oInput.middleChar);
100     var strSecond = arrValue[2];
101     if(strSecond.length < 2)
102         arrValue[2] = "0" + strSecond;
103     else if(parseInt(strSecond,10) > 59)
104         arrValue[2] = "00";
105     oInput.value = arrValue.join(oInput.middleChar);
106 }
107 
108 function specialText_HourAdd(oInput,isMinus)
109 {
110     var arrValue = oInput.value.split(oInput.middleChar);
111     var strHour = arrValue[0];
112     if(isMinus)
113     {
114         arrValue[0] = parseInt(strHour,10) - 1;
115         if(parseInt(arrValue[0],10) < 0)
116             arrValue[0] = "23";
117     }
118     else
119     {
120         arrValue[0] = parseInt(strHour,10) + 1;
121         if(parseInt(arrValue[0],10) ==24)
122             arrValue[0] = "00";
123      }
124     oInput.value = arrValue.join(oInput.middleChar);
125     specialText_validHour(oInput);
126     specialText_SelectHour(oInput);
127 }
128 
129 function specialText_MinuteAdd(oInput,isMinus)
130 {
131     var arrValue = oInput.value.split(oInput.middleChar);
132     var strMinute = arrValue[1];
133     if(isMinus)
134     {
135         arrValue[1] = parseInt(strMinute,10) - 1;
136         if(parseInt(arrValue[1],10) < 0)
137             arrValue[1] = "59";
138     }
139     else
140     {
141         arrValue[1] = parseInt(strMinute,10) + 1;
142         if(parseInt(arrValue[1],10) ==60)
143             arrValue[1] = "00";
144     }
145     oInput.value = arrValue.join(oInput.middleChar);
146     specialText_validMinute(oInput);
147     specialText_SelectMinute(oInput);
148 }
149 
150 function specialText_SecondAdd(oInput,isMinus)
151 {
152     var arrValue = oInput.value.split(oInput.middleChar);
153     var strSecond = arrValue[2];
154     if(isMinus)
155     {
156         arrValue[2] = parseInt(strSecond,10) - 1;
157         if(parseInt(arrValue[2],10) < 0)
158             arrValue[2] = "59";
159     }
160     else
161     {
162         arrValue[2] = parseInt(strSecond,10) + 1;
163         if(parseInt(arrValue[2],10) ==60)
164             arrValue[2] = "00";
165     }
166     oInput.value = arrValue.join(oInput.middleChar);
167     specialText_validSecond(oInput);
168     specialText_SelectSecond(oInput);
169 }
170 
171 function specialText_TimeKeyDownEvent()
172 {
173     //如果按了数字键
174     if((event.keyCode >= 48 && event.keyCode <= 57) ||
175        (event.keyCode >= 96 && event.keyCode <= 105))
176     {     
177         var oRange = document.selection.createRange();
178         if(oRange.text.indexOf(this.middleChar) != -1)
179             event.returnValue = false;
180         else
181             event.returnValue = true;
182     }
183     //如果按了方向键
184     else if(event.keyCode >= 37 && event.keyCode <= 40)
185     {
186         event.returnValue = false;
187         var keyCode = event.keyCode;
188         //按了左键
189         if(keyCode == 37)
190         {
191             if(this.selectIndex == 1)
192             {
193                 specialText_validHour(this);
194                 specialText_SelectSecond(this);
195             }
196             else if(this.selectIndex == 2)
197             {
198                 specialText_validMinute(this);
199                 specialText_SelectHour(this);
200             }
201             else if(this.selectIndex == 3)
202             {
203                 specialText_validSecond(this);
204                 specialText_SelectMinute(this);
205             }
206             
207         }
208         //按了右键
209         if(keyCode == 39)
210         {
211             if(this.selectIndex == 1)
212             {
213                 specialText_validHour(this);
214                 specialText_SelectMinute(this);
215             }
216             else if(this.selectIndex == 2)
217             {
218                 specialText_validMinute(this);
219                 specialText_SelectSecond(this);
220             }
221             else if(this.selectIndex == 3)
222             {
223                 specialText_validSecond(this);
224                 specialText_SelectHour(this);
225             }
226         }
227 
228         //按了上键
229         if(keyCode == 38)
230         {
231             if(this.selectIndex == 1)
232             {
233                 specialText_validHour(this);
234                 specialText_HourAdd(this,true);
235             }
236             else if(this.selectIndex == 2)
237             {
238                 specialText_validMinute(this);
239                 specialText_MinuteAdd(this,true);
240             }
241             else if(this.selectIndex == 3)
242             {
243                 specialText_validSecond(this);
244                 specialText_SecondAdd(this,true);
245             }
246         }
247 
248         //按了下键
249         if(keyCode == 40)
250         {
251             if(this.selectIndex == 1)
252             {
253                 specialText_validHour(this);
254                 specialText_HourAdd(this,false);
255             }
256             else if(this.selectIndex == 2)
257             {
258                 specialText_validMinute(this);
259                 specialText_MinuteAdd(this,false);
260             }
261             else if(this.selectIndex == 3)
262             {
263                 specialText_validSecond(this);
264                 specialText_SecondAdd(this,false);
265             }
266         }
267     }
268     //如果按了F5 或 TAB，不屏蔽
269     else if(event.keyCode == 116 || event.keyCode == 9)
270         event.returnValue = true;
271     else
272     {
273         event.returnValue = false;
274         event.keyCode = 0;
275     }
276 }

对于日期输入，使用方法在body的onload中添加regDateControl(控件ID,10)/regDateControl(控件ID，7)
对于时间输入，使用方法在body的onload中添加regTimeControl(控件ID)

PS.
在VS2005中，如果用了Maste Page，应该怎么用呢?假如在控件中加入Onload事件，应该怎么写呢？知道的希望告知我这个菜鸟。
代码下载

---