用javascript实现的日期时间输入控件

 

引自：寂寞的袜子 http://hi.baidu.com/05043/blog/item/c8137f893c6a14b10e24447f.html

在b/s程序设计中，经常需要向一个输入框输入日期或时间，并验证输入是否有效。通常的验证方法是在提交的时候进行字符串验证，如果是合法的日期时间则正常提交，否则取消提交并给出错误信息。或者，将日期时间的输入变成几个下拉列表框，由用户选择年月日时分秒。

这里给出一个用javascript编写的日期时间输入验证脚本。这个脚本可以使一个普通的输入框变成日期时间输入框。你只能在这个输入框里输入日期时间 格式的字符串，而不允许你输入任何其他的字符。当你输入非法字符时，它并不是不负责任地弹出错误对话框，而是完全过滤掉你的输入以保证你输入框的内容绝对 是合法的日期时间格式。

事实上，你可以向这个脚本中添加其他验证函数，让这个脚本可以控制其它类型格式的输入，例如：数字、电子邮件、用户ID等等。

java 代码

 

1. <script>  
2. function isTime(str){  
3. var a = str.match(/^(\d{0,2}):(\d{0,2}):(\d{0,2})$/);  
4. if (a == null) return false;  
5. if (a[1]>=24 || a[2]>=60 || a[3]>=60) return false;  
6. return true;  
7. }  
8. function isDateTime(str){  
9. var a = str.match(/^(\d{0,4})-(\d{0,2})-(\d{0,2}) (\d{0,2}):(\d{0,2}):(\d{0,2})$/);  
10. if (a == null) return false;  
11. if ( a[2]>=13 || a[3]>=32 || a[4]>=24 || a[5]>=60 || a[6]>=60) return false;  
12. return true;  
13. }  
14. function isDate(str){  
15. var a = str.match(/^(\d{0,4})-(\d{0,2})-(\d{0,2})$/);  
16. if (a == null) return false;  
17. if ( a[2]>=13 || a[3]>=32 || a[4]>=24) return false;  
18. return true;  
19. }  
20. function validate(obj,type){  
21. var range=obj.createTextRange();  
22. var text = range.text;  
23. var selrange = document.selection.createRange();  
24. var seltext = selrange.text;  
25. var startpos = 0,endpos = 0;  
26. while(selrange.compareEndPoints("StartToStart",range)>0){  
27. selrange.moveStart("character",-1);  
28. startpos ++;  
29. }  
30. while(selrange.compareEndPoints("EndToStart",range)>0){  
31. selrange.moveEnd("character",-1);  
32. endpos ++;  
33. }  
34. if(event.keyCode>=48){  
35. var keytext = String.fromCharCode(event.keyCode);  
36. text = text.substring(0,startpos) + keytext + text.substring(endpos,text.length);  
37. }else if(event.keyCode == 46){//delete  
38. if(startpos == endpos)text = text.substring(0,startpos) + text.substring(startpos+1,text.length);  
39. else text = text.substring(0,startpos) + text.substring(endpos,text.length);  
40. }else if(event.keyCode == 8){  
41. if(startpos == endpos)text = text.substring(0,startpos-1) + text.substring(startpos,text.length);  
42. else text = text.substring(0,startpos) + text.substring(endpos,text.length);  
43. }  
44. if(event.keyCode == 45){  
45. event.returnValue = false;  
46. return;  
47. }  
48. var valid;  
49. switch(type){  
50. case 1:valid = isDate(text);break;  
51. case 2:valid = isTime(text);break;  
52. case 3:valid = isDateTime(text);break;  
53. default:valid = false;  
54. }  
55. if(!valid){  
56. event.returnValue = false;  
57. }  
58. }  
59. </script>   

  把上面这段代码放在web页面的任何位置即可。
使用方法：
日期验证框：

 

java 代码

 

1. "validate(this,1)" value="0000-00-00">   

时间验证框：

 

 

java 代码

 

1. "validate(this,2)" value="00:00:00">   

日期时间验证框：<

 

 

java 代码

 

1. input onkeyDown="validate(this,3)" value="0000-00-00 00:00:00">   

我们可以测试一下。
在页面上加入以下内容：

java 代码

 

1. "date" onkeyDown="validate(this,3)" value="0000-00-00 00:00:00">  

 
然后你可以尝试向这个输入框内输入任何内容，看看效果如何吧