formato a un campo [ayuda por favor]

ricardoernes · #1 (**permalink**) 22/08/2009, 00:11

hola como estan? necesito de su ayuda por favor, de antemano se lo agradezco, tengo un input para una fecha, como hago para darle formato mientras el usuario escribe?¿ ... se que en el onChange, pero como podria crear esta funcion, soy nuevo en .js ....

como podria crear el script ?..... el formato que requiero es

2009-11-02.... es decira año-mes-dia .... asi con esos guiones...

ayudenme por favor

por ahora tengo esto, para nada q ver que me funciona

Código HTML:

<html>
    <head>
        <link rel="stylesheet" href="css/template_css.css" type="text/css" />
        <link rel="stylesheet" href="css/theme.css" type="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		 <script type="text/javascript" src="calendar.js"></script>
    	<script type="text/javascript" src="calendar-setup.js"></script>
    	<script type="text/javascript" src="lang/calendar-es.js"></script>

<script language="javascript">
	window.addEvent("domready", function (){
		var f1 = new fecha('fechaInicio', 'call-field-1');
		var f2 = new fecha('fechaFin', 'call-field-2');
		var f3 = new fecha('call-button-1', null, null, {visible:true, onChange:function(){
			var year = this.fecha.year;
			var mes = this.fecha.mes;
			var dia = this.fecha.dia;
			$('fecha_value').setHTML(year+"-"+mes+"-"+dia);
			}});
	});
</script>
			
        <link rel="shortcut icon" href="images/favicon.ico" />
        <style type="text/css">
	
		 @import url("css/calendar-brown.css");

        </style>
</head>
<body>
       <p align="center">Fecha</p>
<table width="23%" border="4" align="center" bgcolor="#FFFFCC">
				  <form action="php/registrarActividad.php" method="post" name="form1" class="Estilo1">
                                <tr>
                                  <td width="45%">fecha Inicio </td>
                                  <td width="55%"><input name="fechaInicio" type="text" id="cal-field-1" size="11" maxlength="10"/>
                                    <img src="images/month_f2.png" alt="Seleccione Fecha" width="22" height="22" id="cal-button-1">
                                    <script type="text/javascript">
									Calendar.setup({
									  inputField    : "cal-field-1",
									  button        : "cal-button-1",
									  align         : "Tr"
									});
                                            </script></td>
                                  </tr>
                                <tr>
                                  <td>
                                      <label>fecha Fin </label>
                              </td>
                                  <td>
									<input name="fechaFin" type="text"  id="cal-field-2" size="11" maxlength="10"/>
                                    <img src="images/month_f2.png" alt="Seleccione Fecha" width="22" height="22" id="cal-button-2" onClick="submit">
									<script type="text/javascript">
									Calendar.setup({
									  inputField    : "cal-field-2",
									  button        : "cal-button-2",
									  align         : "Tr"
									});
                                            </script></td>
                              </tr></form>
</table>

</body>
</html>

ese script no me valida nada... me permite ir haciendo cualkier cambio no me funciona =(

Adler · #2 (**permalink**) 22/08/2009, 06:43

Hola

Podrías usar una mascara de entrada. El evento sería onkeyup

Suerte

ricardoernes · #3 (**permalink**) 22/08/2009, 10:57

justament... como hago para crear esa mascara de entrada ?

Adler · #4 (**permalink**) 23/08/2009, 07:04

Hola

Te he montado 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>
<input type="text" name="fecha" id= "fecha" onkeyup="Validar(this,'-',patron,true)" maxlength="10" />
</form>
</body>
</html>

Suerte

ricardoernes · #5 (**permalink**) 23/08/2009, 11:57

muuuuchiiisimas gracias !!! excelente, ahora solo falta q sea valida, GRACIAS !!!