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

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

这里有两件事...

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

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

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

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

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

 $('.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> 

Answer 2

您可以使用regex检测何时输入日期，并使用replace函数将值替换为以/分隔的捕获组。

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

 <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})$/,'$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')) }); 

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