带有日期限制的蒙版输入插件 [英] Masked input Plugin with date limit

问题描述

我使用MM / YYYY格式的日期的输入文本字段上的蒙版输入。
（ http://digitalbush.com/projects/masked-input-plugin/ ）

我的JavaScript代码：

  jQuery （$）{
 $（。date）。mask（12/2099）; 
}）; 
  

和HTML代码：

 < input type =textclass =date> 
  

当我开始写字段时，值为12/2099，这是不可能写的其他的东西。

如果在javascript屏蔽我写99/9999，用户可以写日期是假的...所以我不是我要做的？ / p>

我希望用户可以从01/1990开始直到2012年12月12日才能写入，可能会添加到+ 20年的价值的限制，或类似的东西...

解决方案

嗯，我认为有掩码的输入是好的，但我更喜欢验证输入值，因为这些的插件通常与内部使用正则表达式。

我的解决方案可能是：

EDITED AND TESTED）

为邮件添加div

 < form id =frm> 
< input type =textclass =date> 
< div id =msg>< / div> 
< input type =submitvalue =点击我/> 
< / form> 
  

js：

 < script type =text / javascript> 
 
函数verifyDate（datevalue）{
 
 var done = false; 
 
 if（datevalue！= null || datevalue！=''）{
 
 //将日期分割为tmp var 
 var tmp = datevalue.split （'/'）; 
 
 //获取月份和年份
 var month = tmp [0]; 
 var year = tmp [1]; 
 
 if（month> = 1&& month< = 12）{
 if（year> = 1990&& year< = 2099）{
 
 //清理消息
 clean（）; 
 
 //最后，允许用户传递submit 
 done = true; 
 
} else {
 $（'＃msg'）。html（'Year must be from 1990  -  2099.'）; 
} 
} else {
 $（'＃msg'）。html（'Month is invalid。'）; 
} 
} 
 return done; 
} 
 
 function clean（）{
 $（'＃msg'）。html（''）; 
} 
 
 jQuery（function（$）{
 
 //屏蔽输入
 $（。date）mask（12 / 2099）; 
 
 $（'＃frm'）。submit（function（）{
 var datevalue = $（'。date'）val（）; 
 return verifyDate（datevalue）
}）; 
 
 $（。date）。keyup（function（）{
 //获取日期
 var datevalue = $ （this）.val（）; 
 
 //只有当日期是这样的时候：'xx / xxxx'continue 
 if（datevalue.length == 7）{
 verifyDate（datevalue）; 
} else {
 clean（）; 
} 
}）; 
 
}）; 
 
< / script> 
  

希望这有帮助。

I use masked input on a input text field for a date in the MM/YYYY format. ( http://digitalbush.com/projects/masked-input-plugin/ )

My javascript code:

jQuery(function($){
   $(".date").mask("12/2099");
});

And HTML Code:

<input type="text" class="date">

When I start to write something it take to the field the value 12/2099 and it's impossible to write other thing.

If in javascript mask I write 99/9999, users could write date that is false ... so I don't what I have to do ?

I want to users that they could write starting on 01/1990 until 12/2099, possible adding to the restrict with the value of the date + 20 years or something like that ...

解决方案

Well, I think is good to have the masked input but I prefer to validate the input value cause these kind of plugins generally works with regex from inside.

My solution for this could be:

(EDITED AND TESTED)

Adding a div for a message

<form id="frm">
    <input type="text" class="date">
    <div id="msg"></div>
    <input type="submit" value="Click Me"/>
</form>

the js:

     <script type="text/javascript">

            function verifyDate(datevalue) {

              var done = false;

              if(datevalue != null || datevalue != ''){

                //split the date as a tmp var
                var tmp = datevalue.split('/');

                //get the month and year
                var month = tmp[0];
                var year = tmp[1];

               if(month >= 1 && month <= 12){
                  if(year >= 1990 && year <= 2099){

                   //clean the message
                   clean();

                   //finally, allow the user to pass the submit
                   done = true;

                  } else {
                    $('#msg').html('Year must be from 1990 - 2099.');
                  }
               } else {
                  $('#msg').html('Month is invalid.');
               }
            }
            return done;
          }

          function clean() {
             $('#msg').html('');
          }

          jQuery(function($) {

             //mask the input
             $(".date").mask("12/2099");

             $('#frm').submit(function() {
                var datevalue = $('.date').val();
                return verifyDate(datevalue)           
             });

             $(".date").keyup(function(){
                //get the date
                var datevalue = $(this).val();

                //only if the date is full like this: 'xx/xxxx' continue
                if(datevalue.length == 7) {               
                  verifyDate(datevalue);
                } else {
                  clean();
                }
             });

          });

    </script>

Hope this helps.

Regards.

这篇关于带有日期限制的蒙版输入插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！