当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

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

发表于: 2007-07-04   作者:天妒淫淫   来源:转载   浏览:
摘要:   引自:寂寞的袜子 http://hi.baidu.com/05043/blog/item/c8137f893c6a14b10e24447f.html 在b/s程序设计中,经常需要向一个输入框输入日期或时间,并验证输入是否有效。通常的验证方法是在提交的时候进行字符串验证,如果是合法的日期时间则正常提交,否则取消提交并给出错误信息。或者,将日期时间的输入变成几个下拉列表框,由

 

引自:寂寞的袜子 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 == nullreturn false;  
  5. if (a[1]>=24 || a[2]>=60 || a[3]>=60return 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 == nullreturn false;  
  11. if ( a[2]>=13 || a[3]>=32 || a[4]>=24 || a[5]>=60 || a[6]>=60return 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 == nullreturn false;  
  17. if ( a[2]>=13 || a[3]>=32 || a[4]>=24return 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">  
 
然后你可以尝试向这个输入框内输入任何内容,看看效果如何吧

 

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号