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

Question

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

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

编辑：

好的，所以，在网上四处寻找之后，我找到了一种更好的方式来描述我要寻找的日期。它与 HTML5

完全相同

<input type="date">

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

那么，我如何构建一个与 HTML5 "date" 具有相同功能（我不需要日期选择器）但显示格式为 [=] 的文本框29=] 单击按钮后？

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) 将文本框转换为日期或货币文本框？

How do I turn a textbox into a date or currency textbox using only JavaScript (jQuery)?

javascript

jquery

currency

date