Máscara de fecha inteligente inteligente al insertar la fecha

Question

¿Hay alguna manera en javascript o jQuery para detectar y cambiar dinámicamente al escribir una fecha tanto para la entrada de una clave como para copiar y pegar en un cuadro de texto?

Estoy tratando de crear un cuadro de texto funcional que tiene dos dígitos, como un mes.

Desde el mes puede ser un número del 1 - 12 Quiero hacer cumplir el primer dígito a ser un 1 o un 0.

El truco que estoy tratando de hacer sin embargo es cuando el primer cuadro de texto gana enfoque y un usuario comienza a escribir un número, si ese número es 2 - 9, quiero que un cero llene automáticamente el primer punto y luego el 9 en el segundo.

Antes de escribir nada esta entrada fecha se vería así:

__/__/_____ 

Si escribo un "1"

1_/__/_____ 

Si escribo "2" debe conseguir

02/__/_____ 

Si escribo "22" debería obtener

02/2_/_____ 

Si escribo "77" debe conseguir

07/07/_____ 

estaría muy interesado en una respuesta con código o un enlace a una herramienta que ya hace esto o un enlace a un post anterior?

Eventualmente quiero ponerlo en un enmascarado para que 7/7/2011 o 7/7/11 o 07/07/2011 siempre se llene hasta 07/07/2011. En la versión final final, estoy tratando de poner el año en default a la década actual, pero tengo una lista desplegable para cada 10 años ++ -.

Answer 1

¿Por qué no conectar un oyente a la falta de definición del cuadro de texto, en lugar de a la escritura del usuario.

¿Piensa en la experiencia del usuario si estaba escribiendo "1", y de repente, la entrada comenzó a agregar o eliminar ceros a lo que estaba haciendo, mientras lo hacía?

var dayInput = document.getElementById("day-input"); 
// usually, I'd just use event-listeners, but feel free to refactor 
dayInput.onblur = handleDayOrMonth; 

function handleDayOrMonth() { 
    var el = (this === window) ? event.srcElement : this, 
     number_string = el.value; 

    // checking that it's an actual number 
    if (!isNaN(parseInt(number_string)) { 
     if (number_string.length === 1) { el.value = "0" + number_string; } 
    } 
} 

manipulación del año sería lo mismo, excepto que usted estaría agregando "20" para el inicio de lo que sea.

Siéntase libre de jQuery.

Answer 2

creo que la funcionalidad que desea es proporcionada por la demostración jQuery Masked Input plugin

: http://jsfiddle.net/SO_AMK/SEXAj/

Tenga en cuenta que también permite solamente caracteres numéricos.

Answer 3

La respuesta va aquí ... jQuery masked input plugin.