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

Question

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

好吧，我的代码可以正常工作，但我希望我的“输入类型文本”自动格式化为日期 (html 5 input type=date)，因为在我的 Servlet 中我将它转换为 Age。问题是，如果我使用“input type=date”转换是错误的，所以我决定使用“input type=text”并且它正在工作。那么是否可以将“/”自动放入这种格式“mm/dd/yyyy”？例如，如果用户输入 2 个字符，“/”将自动输入等。

---

从生日到年龄的 Servlet

        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);

---

在表单中更新

<tr>
    <td><label for="inputName">Birthdate</label>
       <input type="text" placeholder="mm/dd/yyyy" id="input_date" name="birthdate" maxlength="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>

添加脚本

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

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

Answer 1

我一直在 GitHub 上关注一个名为 formatter.js http://firstopinion.github.io/formatter.js/demos.html 的格式化项目(并提供反馈以改进它)。这可能正是您正在寻找的东西。

这不会阻止您输入像 5 月 53 日这样的日期……但它会帮助您格式化。

new Formatter(document.getElementById('date-input'), {
  'pattern': '{{99}}/{{99}}/{{9999}}',
  'persistent': true
});

或

$('#date-input').formatter({
  'pattern': '{{99}}/{{99}}/{{9999}}',
  'persistent': true
});