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

阅读更多

 

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

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

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

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

java 代码

  </span></span></li> 
   <li class=""><span>function isTime(str){  </span></li> 
   <li class="alt"><span>var a = str.match(/^(\d{<span class="number">0</span><span>,</span><span class="number">2</span><span>}):(\d{</span><span class="number">0</span><span>,</span><span class="number">2</span><span>}):(\d{</span><span class="number">0</span><span>,</span><span class="number">2</span><span>})$/);  </span></span></li> 
   <li class=""><span><span class="keyword">if</span><span> (a == </span><span class="keyword">null</span><span>) </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>;  </span></span></li> 
   <li class="alt"><span><span class="keyword">if</span><span> (a[</span><span class="number">1</span><span>]>=</span><span class="number">24</span><span> || a[</span><span class="number">2</span><span>]>=</span><span class="number">60</span><span> || a[</span><span class="number">3</span><span>]>=</span><span class="number">60</span><span>) </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>;  </span></span></li> 
   <li class=""><span><span class="keyword">return</span><span> </span><span class="keyword">true</span><span>;  </span></span></li> 
   <li class="alt"><span>}  </span></li> 
   <li class=""><span>function isDateTime(str){  </span></li> 
   <li class="alt"><span>var a = str.match(/^(\d{<span class="number">0</span><span>,</span><span class="number">4</span><span>})-(\d{</span><span class="number">0</span><span>,</span><span class="number">2</span><span>})-(\d{</span><span class="number">0</span><span>,</span><span class="number">2</span><span>}) (\d{</span><span class="number">0</span><span>,</span><span class="number">2</span><span>}):(\d{</span><span class="number">0</span><span>,</span><span class="number">2</span><span>}):(\d{</span><span class="number">0</span><span>,</span><span class="number">2</span><span>})$/);  </span></span></li> 
   <li class=""><span><span class="keyword">if</span><span> (a == </span><span class="keyword">null</span><span>) </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>;  </span></span></li> 
   <li class="alt"><span><span class="keyword">if</span><span> ( a[</span><span class="number">2</span><span>]>=</span><span class="number">13</span><span> || a[</span><span class="number">3</span><span>]>=</span><span class="number">32</span><span> || a[</span><span class="number">4</span><span>]>=</span><span class="number">24</span><span> || a[</span><span class="number">5</span><span>]>=</span><span class="number">60</span><span> || a[</span><span class="number">6</span><span>]>=</span><span class="number">60</span><span>) </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>;  </span></span></li> 
   <li class=""><span><span class="keyword">return</span><span> </span><span class="keyword">true</span><span>;  </span></span></li> 
   <li class="alt"><span>}  </span></li> 
   <li class=""><span>function isDate(str){  </span></li> 
   <li class="alt"><span>var a = str.match(/^(\d{<span class="number">0</span><span>,</span><span class="number">4</span><span>})-(\d{</span><span class="number">0</span><span>,</span><span class="number">2</span><span>})-(\d{</span><span class="number">0</span><span>,</span><span class="number">2</span><span>})$/);  </span></span></li> 
   <li class=""><span><span class="keyword">if</span><span> (a == </span><span class="keyword">null</span><span>) </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>;  </span></span></li> 
   <li class="alt"><span><span class="keyword">if</span><span> ( a[</span><span class="number">2</span><span>]>=</span><span class="number">13</span><span> || a[</span><span class="number">3</span><span>]>=</span><span class="number">32</span><span> || a[</span><span class="number">4</span><span>]>=</span><span class="number">24</span><span>) </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>;  </span></span></li> 
   <li class=""><span><span class="keyword">return</span><span> </span><span class="keyword">true</span><span>;  </span></span></li> 
   <li class="alt"><span>}  </span></li> 
   <li class=""><span>function validate(obj,type){  </span></li> 
   <li class="alt"><span>var range=obj.createTextRange();  </span></li> 
   <li class=""><span>var text = range.text;  </span></li> 
   <li class="alt"><span>var selrange = document.selection.createRange();  </span></li> 
   <li class=""><span>var seltext = selrange.text;  </span></li> 
   <li class="alt"><span>var startpos = <span class="number">0</span><span>,endpos = </span><span class="number">0</span><span>;  </span></span></li> 
   <li class=""><span><span class="keyword">while</span><span>(selrange.compareEndPoints(</span><span class="string">"StartToStart"</span><span>,range)></span><span class="number">0</span><span>){  </span></span></li> 
   <li class="alt"><span>selrange.moveStart(<span class="string">"character"</span><span>,-</span><span class="number">1</span><span>);  </span></span></li> 
   <li class=""><span>startpos ++;  </span></li> 
   <li class="alt"><span>}  </span></li> 
   <li class=""><span><span class="keyword">while</span><span>(selrange.compareEndPoints(</span><span class="string">"EndToStart"</span><span>,range)></span><span class="number">0</span><span>){  </span></span></li> 
   <li class="alt"><span>selrange.moveEnd(<span class="string">"character"</span><span>,-</span><span class="number">1</span><span>);  </span></span></li> 
   <li class=""><span>endpos ++;  </span></li> 
   <li class="alt"><span>}  </span></li> 
   <li class=""><span><span class="keyword">if</span><span>(event.keyCode>=</span><span class="number">48</span><span>){  </span></span></li> 
   <li class="alt"><span>var keytext = String.fromCharCode(event.keyCode);  </span></li> 
   <li class=""><span>text = text.substring(<span class="number">0</span><span>,startpos) + keytext + text.substring(endpos,text.length);  </span></span></li> 
   <li class="alt"><span>}<span class="keyword">else</span><span> </span><span class="keyword">if</span><span>(event.keyCode == </span><span class="number">46</span><span>){</span><span class="comment">//delete</span><span>  </span></span></li> 
   <li class=""><span><span class="keyword">if</span><span>(startpos == endpos)text = text.substring(</span><span class="number">0</span><span>,startpos) + text.substring(startpos+</span><span class="number">1</span><span>,text.length);  </span></span></li> 
   <li class="alt"><span><span class="keyword">else</span><span> text = text.substring(</span><span class="number">0</span><span>,startpos) + text.substring(endpos,text.length);  </span></span></li> 
   <li class=""><span>}<span class="keyword">else</span><span> </span><span class="keyword">if</span><span>(event.keyCode == </span><span class="number">8</span><span>){  </span></span></li> 
   <li class="alt"><span><span class="keyword">if</span><span>(startpos == endpos)text = text.substring(</span><span class="number">0</span><span>,startpos-</span><span class="number">1</span><span>) + text.substring(startpos,text.length);  </span></span></li> 
   <li class=""><span><span class="keyword">else</span><span> text = text.substring(</span><span class="number">0</span><span>,startpos) + text.substring(endpos,text.length);  </span></span></li> 
   <li class="alt"><span>}  </span></li> 
   <li class=""><span><span class="keyword">if</span><span>(event.keyCode == </span><span class="number">45</span><span>){  </span></span></li> 
   <li class="alt"><span>event.returnValue = <span class="keyword">false</span><span>;  </span></span></li> 
   <li class=""><span><span class="keyword">return</span><span>;  </span></span></li> 
   <li class="alt"><span>}  </span></li> 
   <li class=""><span>var valid;  </span></li> 
   <li class="alt"><span><span class="keyword">switch</span><span>(type){  </span></span></li> 
   <li class=""><span><span class="keyword">case</span><span> </span><span class="number">1</span><span>:valid = isDate(text);</span><span class="keyword">break</span><span>;  </span></span></li> 
   <li class="alt"><span><span class="keyword">case</span><span> </span><span class="number">2</span><span>:valid = isTime(text);</span><span class="keyword">break</span><span>;  </span></span></li> 
   <li class=""><span><span class="keyword">case</span><span> </span><span class="number">3</span><span>:valid = isDateTime(text);</span><span class="keyword">break</span><span>;  </span></span></li> 
   <li class="alt"><span><span class="keyword">default</span><span>:valid = </span><span class="keyword">false</span><span>;  </span></span></li> 
   <li class=""><span>}  </span></li> 
   <li class="alt"><span><span class="keyword">if</span><span>(!valid){  </span></span></li> 
   <li class=""><span>event.returnValue = <span class="keyword">false</span><span>;  </span></span></li> 
   <li class="alt"><span>}  </span></li> 
   <li class=""><span>}  </span></li> 
   <li class="alt"><span>

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

 

java 代码

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

时间验证框：

 

 

java 代码

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

日期时间验证框：<

 

 

java 代码

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

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

java 代码

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

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