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

这里有两件事......

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

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

因此，为了验证日期，我建议使用Moment.js。

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

然后......用户必须能够纠正错误，因此允许退格键，删除键和左/右箭头。

＆＃13;

$('.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");
      }
    }
  }
});

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果要在每个细分后插入它们，可以使用以下内容：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: