什麼是在日期字段中自動插入斜槓'/'的最佳方式

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