如何将日期字段中的输入数据限制为仅限某些字符？

Question

我正在创建一个 Rails 5 应用程序。我有一个咖啡脚本文件，我想在其中创建一个函数来限制某人通过输入数据来输入日期对象。我希望表格像

12/31/2017

但我希望此人只能输入数字（并使用箭头键移动光标）。我希望自动添加斜杠。我尝试创建这个

add_slahes_to_date = (input) ->
  if input.value != input.value.replace(/[^0-9\.]/g, '')
    input.value = input.value.replace(/[^0-9\.]/g, '')
  v = input.value
  if v.match(/^\d{2}$/)
    input.value = v + '/'
  else if v.match(/^\d{2}\/\d{2}$/)
    input.value = v + '/'

但它有几个问题。它会自动添加一个斜杠，但在下一个条目中它会删除斜杠。此外，当添加斜杠时，我无法点击向左箭头返回并编辑第一个斜杠之前的数字。

将日期输入限制为数字但自动添加斜杠的正确方法是什么？如果有帮助，我也在使用 jQuery。

Answer 1

您可以使用正则表达式检测输入日期的时间，并使用替换函数将值替换为以 / 分隔的捕获组。

$('#date').on("input",function(){
    $(this).val($(this).val().replace(/[^0-9\.]/g, '').replace(/(\d{2})\/?(\d{2})\/?(\d{4})/,'//'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="date"></input>

如果你想在每个段之后插入它们，你可以使用以下方法：

$('#date').on("input",function(){
  $(this).val($(this).val().replace(/[^0-9\.]/, ''))
  $(this).val($(this).val().replace(/^(\d{2})$/,'/'))
  $(this).val($(this).val().replace(/^(\d{2})\/?(\d{2})$/,'//'))
  $(this).val($(this).val().replace(/^(\d{2})\/?(\d{2})\/?(\d{4})$/,'//'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="date"></input>

Answer 2

这里有两件事...

将字段字符限制为数字
斜杠自动添加

而且我会添加日期验证...因为 55/66/9999 显然不是有效日期。

所以要验证日期，我建议使用 Moment.js。

我还添加了年份限制（示例中为 1980 年到 2050 年之间）。

然后...用户必须能够更正错误，因此允许使用退格键、删除键和 left/right 箭头。

$('.date')
  .on("keydown",function(e){
  //console.log(e.which);
  
  // Remove error background-color
  $(this).css({"background-color":"initial"});

  // Diallow character that are not a numbers 0 to 9 (both keypads), but allow backspace and left/right arrows
  if( (e.which<48 || e.which>57) && (e.which<96 || e.which>105) && e.which!=8 && e.which!=46 && e.which!=37 && e.which!=39){
    return false;
  }
  
}).on("keyup",function(e){
  if(e.which!=8 && e.which!=46 && e.which!=37 && e.which!=39){
    var value = $(this).val();

    // Auto add slashes
    pattern = /(\d{1,2})?(\/)?(\d{1,2})/g;
    var match = value.match(pattern);
    //console.log(match);

    if( (value.length==2 || value.length==5) && typeof(match)!="null" ){
      $(this).val(match+"/");
    }

    // When all digits are entered
    if( value.length==10 ){


      var date = value.split("/");
      var valid;
      if( (parseInt(date[2])>=1980) && (parseInt(date[2])<=2050) ){

        // Use Moment to validate the date. Will return "invalid date" on impossible dates
        valid = moment(date[2]+"-"+date[0]+"-"+date[1]).format("MM/DD/Y");

      }else{
        valid = "Invalid date";
      }

      // Show error color to user
      if(valid=="Invalid date"){
        $(this).css({"background-color":"red"});
      }else{
        $(this).css({"background-color":"green"}).trigger("blur");
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

<input class="date" placeholder="MM-DD-YYYY"></input>

如何将日期字段中的输入数据限制为仅限某些字符？

How do I restrict typing data into a date field to only certain charaters?

jquery

ruby-on-rails

input

coffeescript

ruby-on-rails-5