Textbox con mascara de formato fecha

angel_dope · #1 (**permalink**) 11/11/2009, 09:59

Hola, tengo un formulario con un par de textbox donde los usuarios tienen que meter una fecha y quisiera que al ver el formulario estos dos textbox apareciesen ya con las barras puestas y que al rellenarlo se aplicase el formato de forma automática, es decir, al entrar a la página verían esto:

Código PHP:

    <input name="textfield" type="text" value="  /  /    " size="10" maxlength="10" />

Y a medida que ellos escriban la fecha las barras permanezcan en su sitio sin desplazarse, por lo que al final les quedaría algo con el formato adecuado, por ejemplo 23/11/2009

Muchas gracias, salu2

kbmaster · #2 (**permalink**) 11/11/2009, 13:50

te pao un codigo algo simple que seguramente podra ilustrarte en el modo q debes implementar lo que buscas:

document.onkeyup=function(evt)
{
evt = (evt) ? evt : (window.event);
charCode = parseInt(evt.keyCode);

dd=/^([1-9]|[12][0-9]|3[01])$/
mm=/^([1-9]|[12][0-9]|3[01])\/([1-9]|1[012])$/
aa=/^([1-9]|[12][0-9]|3[01])\/([1-9]|1[012])\/(19|20)\d\d$/

txt=document.getElementById("_fecha");
val=txt.value;
if(!aa.test(val))
{
if(dd.test(val) || mm.test(val))
{
val+="/";
txt.value=val;
txt.style.background='#FFFFFF';
return;
}else
{
txt.style.background='#FF0000';
return;
}
}

txt.style.background='#00FF00';
}

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

angel_dope · #3 (**permalink**) 12/11/2009, 05:31

Lo he probado, pero algo falla, por ejemplo si pongo como fecha 1/1/2009 va bien, sin embargo, no me deja poner 01/01/2009, que habría que poner para que permita este formato?? Por lo demás perfecto, salvo que quieren que cuando esté en blanco ya aparezcan las barras, es decir, el value del textbox al entrar en la página sería / / , hay forma de hacerlo??

Adler · #4 (**permalink**) 12/11/2009, 06:33

Hola

Prueba con esto

Código javascript:

Ver original<html>
</head>
<script type="text/javascript">
var patron = new Array(4,2,2)
function Validar(elem,separador,pat,numerico) {
    if(elem.valoranterior != elem.value) { 
valor = elem.value;
largo = valor.length;
valor = valor.split(separador);
valor2 = "";
 
    for(i=0; i<valor.length; i++) {
        valor2 += valor[i]; 
    }
 
    if(numerico){
        for(j=0; j<valor2.length; j++){
            if(isNaN(valor2.charAt(j))){
                letra = new RegExp(valor2.charAt(j),"g");
                valor2 = valor2.replace(letra,"");
            }
        }
    }
 
valor = "";
valor3 = new Array();
    for(n=0; n<pat.length; n++) {
        valor3[n] = valor2.substring(0,pat[n]);
        valor2 = valor2.substr(pat[n]);
    }
 
    for(q=0; q<valor3.length; q++) {
        if(q == 0) {
            valor = valor3[q];
        }else{
            if(valor3[q] != "") {
                if (valor3[1] > 12 ) {
                    valor = valor3[0];
                } else if (valor3[2] > 31) {
                    valor = valor3[0] + separador + valor3[1];
                }else{
                    valor += separador + valor3[q];
                }
 
            }
        }
    }
 
    elem.value = valor;
    elem.valoranterior = valor;
    }
}
</script>
</head>
<body>
<form>
<h1>Valida una fecha yyyy-mm-dd</h1>
<input type="text" name="fecha" id= "fecha" onkeyup="Validar(this,'-',patron,true)" maxlength="10" />
</form>
</body>
</html>

Aunque tal vez, te sea mas conveniente a tus necesidades este otro

Suerte

angel_dope · #5 (**permalink**) 12/11/2009, 08:41

He probado el del link que está muy bien, pero no consigo que funcione :( y eso que he cogido uno de los ejemplos tal cual... bueno, de todas formas tu código también va bien, lo único es que necesitaría que el formato fuese dd/mm/yyyy como debería modificarlo, porque no lo tengo muy claro, la verdad.
Muchas gracias, salu2

Adler · #6 (**permalink**) 13/11/2009, 08:15

Hola

Prueba así

Código javascript:

Ver originalvar patron = new Array(2,2,4)
function Validar(elem,separador,pat,numerico) {
    if(elem.valoranterior != elem.value) { 
valor = elem.value;
largo = valor.length;
valor = valor.split(separador);
valor2 = "";
 
    for(i=0; i<valor.length; i++) {
        valor2 += valor[i]; 
    }
 
    if(numerico){
        for(j=0; j<valor2.length; j++){
            if(isNaN(valor2.charAt(j))){
                letra = new RegExp(valor2.charAt(j),"g");
                valor2 = valor2.replace(letra,"");
            }
        }
    }
 
valor = "";
valor3 = new Array();
    for(n=0; n<pat.length; n++) {
        valor3[n] = valor2.substring(0,pat[n]);
        valor2 = valor2.substr(pat[n]);
    }
 
    for(q=0; q<valor3.length; q++) {
        if(q == 0) {
            valor = valor3[q];
        }else{
            if(valor3[q] != "") {
                if (valor3[1] > 12 ) {
                    valor = valor3[2];
                } else if (valor3[0] > 31) {
                    valor = valor3[1] + separador + valor3[2];
                }else{
                    valor += separador + valor3[q];
                }
 
            }
        }
    }
 
    elem.value = valor;
    elem.valoranterior = valor;
    }
}

Suerte