如何仅使用 JavaScript (jQuery) 将文本框转换为日期或货币文本框？

Question

我正在尝试仅使用 JavaScript 和 jQuery 构建表单。对于其中一个文本框，我需要将其显示为日期。另一个是美国货币。

我以前见过一些非常酷的表格，其中已经有“//”符号，当您输入日期时，它完全融入符号中，因此您不必输入它们。此外，当单击按钮时，我需要它以相同格式（mm/dd/yyyy）显示为日期。另外，不知何故，我需要它，如果没有输入日期，按下按钮时它什么也不显示。

编辑：

好的，所以，在网上四处查看之后，我找到了一种更好的方式来描述我正在寻找的约会对象。和 HTML5 完全一样

<input type="date">

但是，单击按钮后，我需要它显示为 MM/DD/YYYY，而 HTML5 只允许 YYYY-MM-DD，这不是我想要的。

那么，如何构建一个与 HTML5“日期”具有相同功能（我不需要日期选择器）但在单击按钮后显示格式为 MM/DD/YYYY 的单个文本框?

Answer 1

这种输入不是微不足道的。你需要做一些技巧。首先是 HTML：

<div id="dateInput">
    <input type="number" placeholder="MM" maxlength="2"/>/<input type="number" placeholder="DD" maxlength="2"/>/<input type="number" placeholder="YYYY" maxlength="4"/>
</div>

<div id="moneyInput">
    $<input type="number"/>
</div>

现在是基本的 CSS，我们将从输入中删除边框并将它们添加到容器中：

input{
   border:none;
   background:transparent;
}

div{
   border:1px solid #e0e0e0;
}

这是最难的部分，Javascript/jQuery。这笔钱应该在本地工作，但日期需要一些工作。

$('#dateInput').on('input', function(){
   //get max length of the input
   var maxLength = parseInt($(this).attr('maxlength'));
   //get the current value of the input
   var currentValue = $(this).val();
   //if the current value is equal to the maxlength
   if(maxLength == currentValue.length){
       //move to next field
       $(this).next().focus();
   };
});

按下按钮从输入中收集所有值并显示

$('button').on('click', function(e){
    e.preventDefault();
    //set the variable to append ti
    var dateDisplay = '';
    //iterate over the inputs
    $('#dateInput input').each(function(){
       //if dateDisplay exists (will explain soon)
       if(dateDisplay && $(this).val() != ''){
           //append the value
           dateDisplay += $(this).val() + '/';
       } else {
           //if the value is blank, make the variable false.
           dateDisplay = false;
       };
    });

    //now check the variable
    if(dateDisplay){
        //if it's all good, remove the last character (/) and display
        alert(dateDisplay.slice(0,-1));
    }
    return false;
});

这不检查有效性，只处理一般的用户体验。

Answer 2

我在网上和其他论坛上浏览，找到了这个答案：

 $('#date').keyup(function(){
      if ($(this).val().length == 2){
           $(this).val($(this).val() + "/");
      }
      else if ($(this).val().length == 5){
           $(this).val($(this).val() + "/");
      }
  });