什么是在日期字段中自动插入斜杠'/'的最佳方式

Question

我想添加功能来输入日期字段，以便当用户输入数字时，斜线“/”会自动添加。

因此，假设我有以下的HTML：

<input type="text" id="fooDate" /> 

并假设我有以下的javascript：

var dateField = document.getElementById("fooDate"); 
dateField.onkeyup = bar; 

我应该bar是什么？

迄今为止最好的谷歌的结果是：

function bar(evt) 
{ 
    var v = this.value; 
    if (v.match(/^\d{2}$/) !== null) { 
     this.value = v + '/'; 
    } else if (v.match(/^\d{2}\/\d{2}$/) !== null) { 
     this.value = v + '/'; 
    } 

} 

谢谢！

也 - 我知道当你输入糟糕时输入斜线。只需滚动它：p

Answer 1

尝试使用此插件：http://digitalbush.com/projects/masked-input-plugin/ 它适用于jquery。

Answer 2

更新/编辑：显然，当今最广泛的HTML5支持最简单的解决方案是使用<input type="date" name="yourName">。

对于那些抱怨它不适合退格或粘贴，我修改了原来：

//Put our input DOM element into a jQuery Object 
var $jqDate = jQuery('input[name="jqueryDate"]'); 

//Bind keyup/keydown to the input 
$jqDate.bind('keyup','keydown', function(e){ 

    //To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing: 
    if(e.which !== 8) { 
     var numChars = $jqDate.val().length; 
     if(numChars === 2 || numChars === 5){ 
      var thisVal = $jqDate.val(); 
      thisVal += '/'; 
      $jqDate.val(thisVal); 
     } 
    } 
}); 

`

工作小提琴：https://jsfiddle.net/ChrisCoray/hLkjhsce/

Answer 3

该解决方案为我工作。我已经捕获了模糊事件，但如果您想使用键盘事件，则必须更改代码。 HTML

<input type="text" id="fooDate" onblur="bar(this)"/> 

的Javascript

function bar(txtBox) { 
    if (txtBox == null) { 
    return '' 
    } 

    var re = new RegExp(/(\d{6})(\d{2})?/); 

    if (re.test(txtBox.value)) { 
    if (txtBox.value.length == 8) { 
     txtBox.value = txtBox.value.substring(0, 2) + '/' + txtBox.value.substring(2, 4) + '/' + txtBox.value.substring(4, 8) 
    } 
    if (txtBox.value.length == 7) { 
     txtBox.value = txtBox.value.substring(0, 2) + '/' + txtBox.value.substring(2, 3) + '/' + txtBox.value.substring(3, 8) 
    } 

    if (txtBox.value.length == 6) { 
     if (txtBox.value.substring(4, 6) < 20) { 
     txtBox.value = txtBox.value.substring(0, 2) + '/' + txtBox.value.substring(2, 4) + '/20' + txtBox.value.substring(4, 6); 
     } else { 
     txtBox.value = txtBox.value.substring(0, 2) + '/' + txtBox.value.substring(2, 4) + '/19' + txtBox.value.substring(4, 6); 
     } 
    } 
    } 
    return txtBox.value; 
} 

Answer 4

该解决方案还处理删除和退格键：

jQuery('input[name="dateofbirth"]').bind('keyup',function(event){ 
    var key = event.keyCode || event.charCode; 
    if (key == 8 || key == 46) return false; 
    var strokes = $(this).val().length; 
    if(strokes === 2 || strokes === 5){ 
     var thisVal = $(this).val(); 
     thisVal += '/'; 
     $(this).val(thisVal); 
    } 
}); 

Answer 5

我有一个可以使用jQuery UI的日期选择器工作，没有格式化的替代品。 JS。打算从keyup和change事件中调用。它增加了零填充。它通过构造dateFormat字符串中的表达式来处理各种支持的日期格式。我想不到以少于三次替换的方式。

// Example: mm/dd/yy or yy-mm-dd 
var format = $(".ui-datepicker").datepicker("option", "dateFormat"); 

var match = new RegExp(format 
    .replace(/(\w+)\W(\w+)\W(\w+)/, "^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*") 
    .replace(/mm|dd/g, "\\d{2}") 
    .replace(/yy/g, "\\d{4}")); 
var replace = "$1/$2/$3$4" 
    .replace(/\//g, format.match(/\W/)); 

function doFormat(target) 
{ 
    target.value = target.value 
     .replace(/(^|\W)(?=\d\W)/g, "$10") // padding 
     .replace(match, replace)    // fields 
     .replace(/(\W)+/g, "$1");   // remove repeats 
} 

https://jsfiddle.net/4msunL6k/

Answer 6

这是一个simples方式：

Date: <input name=x size=10 maxlength=10 onkeyup="this.value=this.value.replace(/^(\d\d)(\d)$/g,'$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2').replace(/[^\d\/]/g,'')">

Here ia a fiddle : https://jsfiddle.net/y6mnpc1j/

Answer 7

如果您正在寻找纯JS版@克里斯的回答

var newInput = document.getElementById("theDate"); 
newInput.addEventListener('keydown', function(e){ 
    if(e.which !== 8) { 
     var numChars = e.target.value.length; 
     if(numChars === 2 || numChars === 5){ 
      var thisVal = e.target.value; 
      thisVal += '/'; 
      e.target.value = thisVal; 
     } 
    } 
}); 

和HTML的部分可能是（如有必要）：

<input type="text" name="theDate" id="birthdate" maxlength="10"/>