如何自动格式化文本框输入

问题描述

 < TR> 
< td>< label> Birthdate< / label> 
< input type =textplaceholder =mm / dd / yyyyname =birthdatemaxlength =10/> 
< / td> 
< / tr> 
  

好吧，我的代码正在工作，但我希望我的输入类型文本能够像日期一样自动格式化（HTML 5输入类型=日期），因为在我的Servlet中，我将它转换为Age。
问题是，如果我使用输入类型=日期转换是错误的，所以我决定使用输入类型=文本，它的工作。那么是否可以自动将/格式设置为mm / dd / yyyy？例如，如果用户输入2个字符，/将自动输入等。

---

出生日期到Age

 字符串birthdate = request.getParameter（birthdate）; 
 
 
 int monthDOB = Integer.parseInt（birthdate.substring（0，2））; 
 int dayDOB = Integer.parseInt（birthdate.substring（3，5））; 
 int yearDOB = Integer.parseInt（birthdate.substring（6，10））; 
 
 DateFormat dateFormat = new SimpleDateFormat（MM）; 
 java.util.Date date = new java.util.Date（）; 
 int thisMonth = Integer.parseInt（dateFormat.format（date））; 
 
 dateFormat = new SimpleDateFormat（dd）; 
 date = new java.util.Date（）; 
 int thisDay = Integer.parseInt（dateFormat.format（date））; 
 
 dateFormat = new SimpleDateFormat（YYYY）; 
 date = new java.util.Date（）; 
 int thisYear = Integer.parseInt（dateFormat.format（date））; 
 
 int calAge = thisYear  -  yearDOB; 
 
 if（thisMonth  calAge = calAge  -  1; 
 
 
 if（thisMonth == monthDOB&& thisDay< dayDOB）{
 calAge = calAge  -  1; 
} 
 
 String age = Integer.toString（calAge）; 
  

---

表格更新

 < tr> 
< td>< label for =inputName> Birthdate< / label> 
< input type =textplaceholder =mm / dd / yyyyid =input_datename =birthdatemaxlength =10/> 
< / td> 
< / tr> 
  

更新资料来源

 < script src =../ scripts / formatter.js>< / script> 
< script src =../ scripts / formatter.min.js>< / script> 
< script src =../ scripts / jquery.formatter.js>< / script> 
< script src =../ scripts / jquery.formatter.min.js>< / script>  
 
 
 $ b $ p $ <脚本> 
 $（'＃input_date'）。formatter（{$ b $'pattern'：'{{99}} / {{99}} / {{9999}}'，
' ：true 
}）; 
< / script> 
  

我也尝试过javascript，但它不工作...

解决方案

使用jquery中的datepicker api
这里是链接

这里是工作代码

 < TR> 
< td>< label> Birthdate< / label> 
< input type =textplaceholder =mm / dd / yyyyname =birthdateid =birthdatemaxlength =10/> 
< / td> 
< / tr> 
 
< script> 
 $（function（）{
 $（#birthdate）.datepicker（）; 
}）; 
< / script> 
  

编辑

  $（input [name ='birthdate']：first）。keyup（function（e）{
 var key = String.fromCharCode（e。 $（this）.val（$（this）.val（）。substr（0，$（this）.val（keyCode）; 
 if（！（key> = 0&&key< = 9） （）.length-1））; 
 var value = $（this）.val（）; 
 if（value.length == 2 || value.length == 5）$（this） .val（$（this）.val（）+'/'）; 
}）; 
  

这是您可能需要的代码

这里是

<tr>
   <td><label>Birthdate</label>
      <input type="text" placeholder="mm/dd/yyyy" name="birthdate" maxlength="10"/>
   </td>
</tr>

Well, my code is working but I want my "input type text" to auto format like a date (html 5 input type=date) because in my Servlet I convert it to Age.The problem is that, if I use the "input type=date" the conversion is error so I decided to use "input type=text" and it's working. So is it possible to auto put "/" in this format "mm/dd/yyyy"? For example, if the user input 2 character an "/" will auto input etc.

---

Servlet for birthdate to Age

        String birthdate = request.getParameter("birthdate");


        int monthDOB = Integer.parseInt(birthdate.substring(0, 2));
        int dayDOB = Integer.parseInt(birthdate.substring(3, 5));
        int yearDOB = Integer.parseInt(birthdate.substring(6, 10));

        DateFormat dateFormat = new SimpleDateFormat("MM");
        java.util.Date date = new java.util.Date();
        int thisMonth = Integer.parseInt(dateFormat.format(date));

        dateFormat = new SimpleDateFormat("dd");
        date = new java.util.Date();
        int thisDay = Integer.parseInt(dateFormat.format(date));

        dateFormat = new SimpleDateFormat("YYYY");
        date = new java.util.Date();
        int thisYear = Integer.parseInt(dateFormat.format(date));

        int calAge = thisYear - yearDOB;

        if (thisMonth < monthDOB) {
            calAge = calAge - 1;
        }

        if (thisMonth == monthDOB && thisDay < dayDOB) {
            calAge = calAge - 1;
        }

        String age = Integer.toString(calAge);

---

Update in the form

<tr>
    <td><label for="inputName">Birthdate</label>
       <input type="text" placeholder="mm/dd/yyyy" id="input_date" name="birthdate" maxlength="10"  />
    </td>
</tr>

Update in the source

<script src="../scripts/formatter.js"></script>
<script src="../scripts/formatter.min.js"></script>
<script src="../scripts/jquery.formatter.js"></script>
<script src="../scripts/jquery.formatter.min.js"></script>

Added Script

<script>
     $('#input_date').formatter({
       'pattern': '{{99}}/{{99}}/{{9999}}',
       'persistent': true
     });
</script>

I also tried the javascript but it's not working...

解决方案

use datepicker api from jqueryhere is the link Datepicker

and here is the working code

<tr>
   <td><label>Birthdate</label>
      <input type="text" placeholder="mm/dd/yyyy" name="birthdate" id="birthdate" maxlength="10"/>
   </td>
</tr>

<script>
  $(function() {
    $( "#birthdate" ).datepicker();
  });
</script>

EDIT

$("input[name='birthdate']:first").keyup(function(e){
    var key=String.fromCharCode(e.keyCode);
    if(!(key>=0&&key<=9))$(this).val($(this).val().substr(0,$(this).val().length-1));
    var value=$(this).val();
    if(value.length==2||value.length==5)$(this).val($(this).val()+'/');
});

this is the code that you may need

here is the fiddled code

这篇关于如何自动格式化文本框输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！