Ayuda para crear una máscara de entrada con javascript para escribir la fecha
Mi pregunta es como puedo hacer en javascript para crear una mascara de entrada apra un campo tipo fecha, una solución es poner al inicio algo parecdi oa esto __/__/__
Esto como valor de inicio pero no se si haya otra posibilidad
Esto como valor de inicio pero no se si haya otra posibilidad
Respuesta de bobbin
1
Ponerle __/__/__ o ponerle dd/mm/aaaa está bien como indicativo de lo que tiene que poner. Yo personalmente le pondría lo segundo a la derecha del campo.
Para mantener el formato te sugiero el uso de expresiones regulares. Sólo tienes que hacer la siguiente comprobación, suponiendo que el campo se llama hola:
hola.value.search (/\d\d\/\d\d\/\d\d\d\d/);
Esta instrucción te devolverá cero si el valor en el campo hola es el de la máscara dd/dd/dddd, donde de es un dígito, y -1 en cualquier otro caso.
No te permite comprobar si la fecha es correcta, pero sí si es una fecha.
/\d\d\/\d\d\/\d\d\d\d/ es la expresión regular y se pone tal cual, sin comillas. Yo te recomiendo la expresión /[\d]?\d\/[\d]?\d\/[\d\d]?\d\d/ , que es una ampliación de la anterior y permite, por ejemplo, introducir 1/1/02 en lugar de 01/01/2002. Como podrás observar, []? hace que lo que hay dentro no sea obligatorio.
También puedes mezclarlas si quieres obligar a que el año sea siempre de cuatro dígitos.
Para mantener el formato te sugiero el uso de expresiones regulares. Sólo tienes que hacer la siguiente comprobación, suponiendo que el campo se llama hola:
hola.value.search (/\d\d\/\d\d\/\d\d\d\d/);
Esta instrucción te devolverá cero si el valor en el campo hola es el de la máscara dd/dd/dddd, donde de es un dígito, y -1 en cualquier otro caso.
No te permite comprobar si la fecha es correcta, pero sí si es una fecha.
/\d\d\/\d\d\/\d\d\d\d/ es la expresión regular y se pone tal cual, sin comillas. Yo te recomiendo la expresión /[\d]?\d\/[\d]?\d\/[\d\d]?\d\d/ , que es una ampliación de la anterior y permite, por ejemplo, introducir 1/1/02 en lugar de 01/01/2002. Como podrás observar, []? hace que lo que hay dentro no sea obligatorio.
También puedes mezclarlas si quieres obligar a que el año sea siempre de cuatro dígitos.
1 respuesta más de otro experto
Respuesta de sugussoft
1
Para poder hacer una mascara de entrada, tienes que hacer una función que chequee que el texto introducido en la caja de texto es correcto, para ello, te haces una función que la llamaár en el evento de la caja de texto "onlostfocus".
En la funcion te declaras una variable, que tendra el valor de la caja de texto (var fecha = document.nombredelformulario.nombredelacajadetexto.value;), te iras recorriendo esa varible con los metodos "indexOf " (que devuelve la posicion que ocupa un caracter en una cadena) y "slice" (que crea una subcadena, de esta forma, "nuevacadena = cadena.slice(posiciondeinicio, posiciondefin);"). Con estos dos métodos compruebas que la fecha introducida es correcta.
Acuérdate de también llamarla (a esa función) antes de guardar los datos, o mandarlos a otra página para que los guarde, por si acaso ha cambiado algo.
En la funcion te declaras una variable, que tendra el valor de la caja de texto (var fecha = document.nombredelformulario.nombredelacajadetexto.value;), te iras recorriendo esa varible con los metodos "indexOf " (que devuelve la posicion que ocupa un caracter en una cadena) y "slice" (que crea una subcadena, de esta forma, "nuevacadena = cadena.slice(posiciondeinicio, posiciondefin);"). Con estos dos métodos compruebas que la fecha introducida es correcta.
Acuérdate de también llamarla (a esa función) antes de guardar los datos, o mandarlos a otra página para que los guarde, por si acaso ha cambiado algo.
Si eso si pero lo que no se si haya como es que de una me aparasca a lo que cargo la página algo como __/__/__ i de ahí encima de eos empiezo a escribor como en visula con el mask
Gracias
Gracias
Para que te aparezca "__/__/__" al cargar la pagina debes pones en la caja de texto el valor por defecto, de esta manera:
<input type="text" name="fecha" value="__/__/__" onfocus="javascript:this.value=''" onlostfocus='comprobarvalor();'>
Como verás en el evento "onfocus" se vacía la caja de texto para que se pueda escribir la fecha y en el evento que salta cuando se pierde el foco (onlostfocus), debes comprobar que tenga el formato deseado, si estuviera vacío, deberás volver a poner el valor inicia ("__/__/__"). Así, si el usuario va pasando por los campos con el tabulador, este no parece que cambie. La función sería algo así:
function comprobarvalor()
{
if (document.nombredelformulario.fecha.value == "")
{
document.nombredelformulario.fecha.value = "__/__/__";
}
else
{
//haces todas las comprobaciones del formato
}
}
<input type="text" name="fecha" value="__/__/__" onfocus="javascript:this.value=''" onlostfocus='comprobarvalor();'>
Como verás en el evento "onfocus" se vacía la caja de texto para que se pueda escribir la fecha y en el evento que salta cuando se pierde el foco (onlostfocus), debes comprobar que tenga el formato deseado, si estuviera vacío, deberás volver a poner el valor inicia ("__/__/__"). Así, si el usuario va pasando por los campos con el tabulador, este no parece que cambie. La función sería algo así:
function comprobarvalor()
{
if (document.nombredelformulario.fecha.value == "")
{
document.nombredelformulario.fecha.value = "__/__/__";
}
else
{
//haces todas las comprobaciones del formato
}
}