Cuál es la mejor manera de insertar barras automáticamente '/' en campos de fecha

Question

Estoy tratando de agregar funcionalidad a los campos de fecha de entrada para que cuando los usuarios ingresen dígitos, las barras "/" se agreguen automáticamente.

Así que supongamos que tengo el código HTML siguiente:

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

Y supongamos que tengo el siguiente javascript:

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

Lo que debería ser bar?

Hasta ahora el mejor resultado fue Google:

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 + '/'; 
    } 

} 

Gracias!

también - Sé que se introducen barras al escribir es una mierda. Simplemente avance con él: p

Answer 1

Intente utilizar este complemento: http://digitalbush.com/projects/masked-input-plugin/ Funciona con jquery.

Answer 2

Actualizar/Editar: Obviamente, la solución más simple hoy en día con soporte HTML5 extendido es usar <input type="date" name="yourName">.

Para aquellos que se quejan de que no se acomoda a las teclas de retroceso o pegar, he modificado el original:

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

`

violín de Trabajo: https://jsfiddle.net/ChrisCoray/hLkjhsce/

Answer 3

Esta solución funciona para mí. He capturado el evento de desenfoque aunque tendrá que cambiar el código si desea usar el evento de tecla. 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

Esta solución también manejar las teclas de borrado y de retroceso:

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

tengo una alternativa que puede trabajar con selector de fechas jquery-ui, sin formateador. js. Se pretende que se llame desde los eventos keyup y change. Agrega cero relleno. Funciona con varios formatos de fecha admitidos mediante la construcción de expresiones a partir de la cadena dateFormat. No puedo pensar en una forma de hacerlo con menos de tres reemplazos.

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

Ésta es una simples manera:

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

Si usted está buscando para la versión pura js de @ respuesta de Chris

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; 
     } 
    } 
}); 

y HTML sección puede ser (si es necesario):

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