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() + "/");
      }
  });

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

2 个答案: