Mascara de fecha en campo input

alhernandez7 · #1 (**permalink**) 19/06/2007, 15:16

Buenas a todos, mi pregunta es que necesito insertar una fecha en base de datos y me gustaria poner una mascara en un campo <input type="text">,
con el formato dd/mm/aaaa, no se si se puede en html o javascriot o php.

Gracias

pzin · #2 (**permalink**) 19/06/2007, 15:20

¿Qué es, o a qué te refieres con máscara?

#3 (**permalink**) 19/06/2007, 19:11

Si te referís a lo que creo (máscara = un patrón que deben seguir los datos ingresados en el campo), tendrás que usar otra cosa además de HTML, ya que HTML no permite especificar esos detalles.

Podés hacerlo con Javascript, pero también deberías hacerlo del lado del servidor, con php o algún otro. Javascript es falible.

Ahora, bastaría con que le aplicaras una expresión regular, que en este caso podría ser:

[0-9]{2}/[0-9]{2}/[0-9]{4}

No comprueba que la fecha sea válida, pero sí que tenga la forma correcta.
Si vas a usar php, podés mirar www.php.net/ereg

Saludos.

alhernandez7 · #4 (**permalink**) 20/06/2007, 07:17

a ver, soy novato en esto del php y javascript, el codigo que me as dicho alvlin : "[0-9]{2}/[0-9]{2}/[0-9]{4}" no se donde ponerlo, si haces el favor de especificar mas te lo agradeceria, no me interesa tanto validar la fecha como que se inserte correctamente, ese codigo que as puesto es para javascript?.

Muchas gracias

#5 (**permalink**) 20/06/2007, 08:13

Ese código es una expresión regular.
Sirve para comprobar que la cadena de caracteres que se ingresa en el campo cumple determinada forma, en este caso que tenga 2 números, una barra, 2 números, otra barra y finalmente 4 números.

Como ejemplo, buscando en internet encontré que para usarlo en Javascript en una función que valide un campo de texto, suponiendo que el campo tenga el id "campo":

var campo = document.getElementById("campo");
var patron = /[0-9]{2}/[0-9]{2}/[0-9]{4}/;
var coincid = reg.exec(campo.value);

if (!coincid)
// hay un error
else
// todo correcto

En PHP es diferente, te recomiendo ver la página cuyo enlace puse antes.

Saludos.

alhernandez7 · #6 (**permalink**) 20/06/2007, 08:19

Muchas gracias alvlin, intentando construir una funcion y buscando por internet e encontrado una funcion javascript que valida y evita que escribas la fecha mal, esta muy bien. la pongo aqui por si a alguien le puede ser util.

Código:

<HTML>
<body>
<FORM>
<input name="fecha" type="text" size="10" maxlength="10" onKeyUp = "this.value=formateafecha(this.value);"> 
</FORM>
<SCRIPT>
function IsNumeric(valor) 
{ 
var log=valor.length; var sw="S"; 
for (x=0; x<log; x++) 
{ v1=valor.substr(x,1); 
v2 = parseInt(v1); 
//Compruebo si es un valor numérico 
if (isNaN(v2)) { sw= "N";} 
} 
if (sw=="S") {return true;} else {return false; } 
} 
var primerslap=false; 
var segundoslap=false; 
function formateafecha(fecha) 
{ 
var long = fecha.length; 
var dia; 
var mes; 
var ano; 
if ((long>=2) && (primerslap==false)) { dia=fecha.substr(0,2); 
if ((IsNumeric(dia)==true) && (dia<=31) && (dia!="00")) { fecha=fecha.substr(0,2)+"/"+fecha.substr(3,7); primerslap=true; } 
else { fecha=""; primerslap=false;} 
} 
else 
{ dia=fecha.substr(0,1); 
if (IsNumeric(dia)==false) 
{fecha="";} 
if ((long<=2) && (primerslap=true)) {fecha=fecha.substr(0,1); primerslap=false; } 
} 
if ((long>=5) && (segundoslap==false)) 
{ mes=fecha.substr(3,2); 
if ((IsNumeric(mes)==true) &&(mes<=12) && (mes!="00")) { fecha=fecha.substr(0,5)+"/"+fecha.substr(6,4); segundoslap=true; } 
else { fecha=fecha.substr(0,3);; segundoslap=false;} 
} 
else { if ((long<=5) && (segundoslap=true)) { fecha=fecha.substr(0,4); segundoslap=false; } } 
if (long>=7) 
{ ano=fecha.substr(6,4); 
if (IsNumeric(ano)==false) { fecha=fecha.substr(0,6); } 
else { if (long==10){ if ((ano==0) || (ano<1900) || (ano>2100)) { fecha=fecha.substr(0,6); } } } 
} 
if (long>=10) 
{ 
fecha=fecha.substr(0,10); 
dia=fecha.substr(0,2); 
mes=fecha.substr(3,2); 
ano=fecha.substr(6,4); 
// Año no viciesto y es febrero y el dia es mayor a 28 
if ( (ano%4 != 0) && (mes ==02) && (dia > 28) ) { fecha=fecha.substr(0,2)+"/"; } 
} 
return (fecha); 
}
</SCRIPT>
</body>
</html>

Muchas gracias!!!

strok_777 · #7 (**permalink**) 15/05/2008, 01:28

y en php, como podria poner una fecha utilizando este formato (AAAA-MM-DD) para una BDD?

#8 (**permalink**) 15/05/2008, 11:13

Hola strok,
Para hacer nuevas consultas, es mejor abrir nuevos temas.

Para tu caso, podés usar la función date().
Si querés formatear la hora actual, simplemente usás

Código PHP:

  date('Y-m-d');

Si tenés una marca de tiempo, la pasás como segundo parámetro

Código PHP:

  date('Y-m-d', $tiempo);

Y si tenés una fecha en día, mes y año, podés usar mktime() como segundo parámetro.

Revisá las páginas de cada función para tener más detalles.

Saludos.

el cirujano · #9 (**permalink**) 22/06/2008, 12:59

Gracias alhernandez7, por tu función, aunque la consegui 1 año y 2 dias despues que la necesitaba pero gracias por tu aporte

vicman · #10 (**permalink**) 22/04/2009, 11:33

misma funcion pero para que valide formato yyyy/mm/dd

Código:

//valida formato yyyy/mm/dd
function IsNumeric(valor)
{
	var log=valor.length;
	var sw="S";
	for (x=0; x<log; x++)
	{
	   v1=valor.substr(x,1);
	   v2 = parseInt(v1);
		//Compruebo si es un valor numérico
		if (isNaN(v2))
		{
		sw= "N";
		}
	}
	
	if (sw=="S")
	{return true;}
	else
	{return false;}
	}

	var primerslap=false;
	var segundoslap=false;
function formateafecha(fecha)
{
	var long = fecha.length;
	var dia;
	var mes;
	var ano;

	   ano=fecha.substr(0,4);
	   if ((long>=4) && (primerslap==false))
	   {
		   
		   ano=fecha.substr(0,4);
		   //alert("akii" + ano);
		   if ((IsNumeric(ano)== false) || ((ano==0) || (ano<1900) || (ano>2100)))
		   {
		       fecha=""; primerslap=false;
		   }
		   else
		   {
		      fecha=fecha.substr(0,4)+"/"+fecha.substr(5,9); primerslap=true;
		   }
	    }
		else
		{
		    ano=fecha.substr(0,4);
		    if (IsNumeric(ano)==false)
		    {
		        fecha="";
		     }
		     if ((long<=4) && (primerslap=true))
		     {
		        fecha=fecha.substr(0,4); primerslap=false;
		     }
	   }// fin if ((long>=4) && (primerslap==false))
	    
	   
	   if ((long>=7) && (segundoslap==false))
	   {
		   mes=fecha.substr(5,2);
		   if ((IsNumeric(mes)==true) &&(mes<=12) && (mes!="00"))
		   {
		       fecha=fecha.substr(0,7)+"/"+fecha.substr(8,2); segundoslap=true;
		   }
		   else
		   {
		      fecha=fecha.substr(0,5);; segundoslap=false;
		   }
	    }
	   else
		{
		     if ((long<=7) && (segundoslap=true))
		    {
		       fecha=fecha.substr(0,6); segundoslap=false;
		    }
	   }//if ((long>=7) && (segundoslap==false))
	   
	   
	   if (long>=9)
       {
           dia=fecha.substr(8,5);
           if (IsNumeric(dia)==false)
           {
               fecha=fecha.substr(0,8);
           }
           else
           {
               if (long==10)
               {
				   if ((dia >31) || (dia=="00"))
                  {
                      fecha=fecha.substr(0,8);
                   }
                }
           }
     } //if (long>=7) 
	 
	 
	 if (long>=10)
     {
         fecha=fecha.substr(0,10);
         dia=fecha.substr(8,2);
         mes=fecha.substr(5,2);
         ano=fecha.substr(0,4);
        // Año no biciesto y es febrero y el dia es mayor a 28
		//alert(mes);
        if ( (ano%4 != 0) && (mes ==02) && (dia > 28) ) // es año biciesto
        {
		   fecha=fecha.substr(0,4)+"/";
         }
      } 
	   

    return (fecha);
}

TheMasterweb · #11 (**permalink**) 28/05/2012, 20:31

Talvés me dirán que este es un post muy antiguo, pero recien lo veo y me sirvio mucho, asi que comparto las mejoras que le hice.

Pues en realidad fue una bobadita, pero que me hizo matar la cabeza un rato, asi que aqui lo comparto.

al final validé que los meses 4-6-9-11 solo tengan 30 dias, que febrero solo 28 y si es bisiesto entonces 29.

Código:

//valida formato yyyy/mm/dd aspirante
function IsNumeric(valor)
{
	var log=valor.length;
	var sw="S";
	for (x=0; x<log; x++)
	{
	   v1=valor.substr(x,1);
	   v2 = parseInt(v1);
		//Compruebo si es un valor numérico
		if (isNaN(v2))
		{
		sw= "N";
		}
	}
	
	if (sw=="S")
	{return true;}
	else
	{return false;}
	}

	var primerslap=false;
	var segundoslap=false;
function formateafecha(fecha)
{
	var long = fecha.length;
	var dia;
	var mes;
	var ano;

	   ano=fecha.substr(0,4);
	   if ((long>=4) && (primerslap==false))
	   {
		   
		   ano=fecha.substr(0,4);
		   //alert("akii" + ano);
		   if ((IsNumeric(ano)== false) || ((ano==0) || (ano<1993) || (ano>1998)))
		   {
		       fecha=""; primerslap=false;
		   }
		   else
		   {
		      fecha=fecha.substr(0,4)+"-"+fecha.substr(5,9); primerslap=true;
		   }
	    }
		else
		{
		    ano=fecha.substr(0,4);
		    if (IsNumeric(ano)==false)
		    {
		        fecha="";
		     }
		     if ((long<=4) && (primerslap=true))
		     {
		        fecha=fecha.substr(0,4); primerslap=false;
		     }
	   }// fin if ((long>=4) && (primerslap==false))
	    
	   
	   if ((long>=7) && (segundoslap==false))
	   {
		   mes=fecha.substr(5,2);
		   if ((IsNumeric(mes)==true) &&(mes<=12) && (mes!="00"))
		   {
		       fecha=fecha.substr(0,7)+"-"+fecha.substr(8,2); segundoslap=true;
		   }
		   else
		   {
		      fecha=fecha.substr(0,5);; segundoslap=false;
		   }
	    }
	   else
		{
		     if ((long<=7) && (segundoslap=true))
		    {
		       fecha=fecha.substr(0,6); segundoslap=false;
		    }
	   }//if ((long>=7) && (segundoslap==false))
	   
	   if (long>=9)
       {
           dia=fecha.substr(8,5);
           if (IsNumeric(dia)==false)
           {
               fecha=fecha.substr(0,8);
           }
           else
           {
               if (long==10)
               {
				   if ((dia >31) || (dia=="00"))
                  {
                      fecha=fecha.substr(0,8);
                   }
				  
                }
           }
     } //if (long>=7) 
	 	 
	 if (long>=10)
     {
         fecha=fecha.substr(0,10);
         dia=fecha.substr(8,2);
         mes=fecha.substr(5,2);
         ano=fecha.substr(0,4);
        // Año no biciesto y es febrero y el dia es mayor a 28
		//alert(mes);
        if ( (ano%4 != 0) && (mes ==02) && (dia > 28) )
        {
                  // desde aqui las correcciones
		   fecha=fecha.substr(0,8);
         }
		 else
		 if ((ano%4 == 0) && (mes=="02") && (dia>29))
		   {
		      fecha=fecha.substr(0,8); 
		   }
		    else
		 if ((mes=="04") || (mes=="06") || (mes=="09") || (mes=="11") && (dia>30))
		   {
		      fecha=fecha.substr(0,8); 
		   }
      }

    return (fecha);
}

Para los que validan dd-mm-aaaa pues solocopien la parte donde comente " // desde aqui las correcciones" y listo.

Espero les sea de utilidad como a mi...

plutoelias · #12 (**permalink**) 30/08/2012, 23:12

Primero que Todo buenas días, de antemano gracias porque las funciones que mostraron inicialmente eran lo que buscaba y el arreglo que le hicieron mejor aún, siempre es bueno saber que personas con conocimientos más avanzados en temas de programación están dispuestos a ayudarnos.
Por otro lado comento que estoy en el diseño de un proyecto de un aplicativo para el manejo de ventas multinivel, al cual me sirve arto éstas funciones que copié, espero que me sigan ayudando y que de igual manera yo les pueda servir en cualequier momento.