Bitácora de Manuweb: Selector de fecha en Javascript

Voy a explicar como poner un selector de día sobre un calendario para un campo fecha dentro de un formulario.

Lo primero son las imagenes que vamos a necesitar:

	Calendario	Avance	Retroceso	Cerrar	Transparente
Imagen

Este es el código Javascript que podemos poner, bien en archivo js aparte, bien dentro del archivo html :

<SCRIPT LANGUAGE="JavaScript">
//  funciones de validación
// 
//
// validafecha(oCampoFecha) -> validar formato de fecha dd/mm/aaaa
//
function ValidarFecha(oCampoFecha) { 
 var sBorrar;
 var sCampoFecha=oCampoFecha.value;
   if (sCampoFecha)   {  
      sBorrar = sCampoFecha;
      if ((sCampoFecha.substr(2,1) == "/") && (sCampoFecha.substr(5,1) == "/"))      {      
         for (i=0; i<10; i++)      { 
            if (((sCampoFecha.substr(i,1)<0) || (sCampoFecha.substr(i,1)>9)) && (i != 2) && (i != 5))   {
               sBorrar = '';
               break;  
   }  
         }
      if (sBorrar) { 
         iAno = sCampoFecha.substr(6,4);
      iMes = sCampoFecha.substr(3,2);
      iDia = sCampoFecha.substr(0,2);
      if((iAno < 1000) || (iAno > 9999) || (iMes < 1) || (iMes > 12) || (iDia < 1) || (iDia > 31))
    sBorrar = '';
      else
      {
         if((iAno%4 != 0) && (iMes == 2) && (iDia > 28))    
            sBorrar = ''; // Año no viciesto y es febrero y el dia es mayor a 28
      else 
      {
            if ((((iMes == 4) || (iMes == 6) || (iMes == 9) || (iMes==11)) && (iDia>30)) || ((iMes==2) && (iDia>29)))
            sBorrar = '';               
      } 
      } 
         } 
      } 
   else
      sBorrar = '';
   if (sBorrar == '') {
      alert('Fecha erronea\r\nUtilice dd/mm/aaaa');
   oCampoFecha.focus();
   oCampoFecha.select();
   }

} 
}

// 
// El script del calendario
//
//
// inicialización de variables
//

var tFecha=new Date();
var iMesActual=tFecha.getMonth(); 
var iAnoActual=tFecha.getYear(); 
var iMesHoy=tFecha.getMonth(); 
var iAnoHoy=tFecha.getYear(); 
var iDiaHoy=tFecha.getDate(); 
var sCampo;
var bPermiteAnterior=false;
var iDesplazamientoSuperiorStandard=0;
var iDesplazamientoIzquierdaStandard=0;

function MesSiguiente(){

LimpiaCalendario();
 ++iMesActual;
 if (iMesActual==12) {
  iMesActual=0;
  ++iAnoActual;
 }
 PonerCalendario();
}

function LimpiaCalendario(){
 var i=0;
 var j=0; 
 var oFilaActual;
 var oCelda;
 var oTabla=document.all("TablaCalendario");

for (i=2;i<8;i++){
  oFilaActual = oTabla.rows[i];
  for (j=0;j<7;j++){
   oCelda=oFilaActual.cells[j];
   oCelda.innerHTML = " ";
  }
 }
}

function PonerCalendario(){
 var iDia=0;
 var tPrimerDiaFecha = new Date(iAnoActual,iMesActual,1);
 var iUltimoDiaMes=ObtieneDiasMes(iMesActual, iAnoActual);
 var iColumna=tPrimerDiaFecha.getDay(); 
 // 0-Domingo . . . 6-Sábado
 --iColumna;
 if (iColumna <0) {
  iColumna = 6;
 }
 var iFila=2;
 var oTabla=document.all("TablaCalendario");
 var oFilaActual;
 var oCelda;

for (iDia=1;iDia<=iUltimoDiaMes;iDia++){
  oFilaActual = oTabla.rows[iFila];
  oCelda=oFilaActual.cells[iColumna];
  if (iColumna!=6) {
   if ((iAnoActual==iAnoHoy) && (iMesActual==iMesHoy) && (iDia==iDiaHoy)) {
    oCelda.innerHTML = "<div align='center' class='sHoyNormal'><A HREF='javascript:InformaFecha("+iDia+")' class='sLinkNormal'>"+iDia+"</A></div>";
   }
   else {
    oCelda.innerHTML = "<div align='center' class='sDiaNormal'><A HREF='javascript:InformaFecha("+iDia+")' class='sLinkNormal'>"+iDia+"</A></div>";
   }
  }
  else {
   if ((iAnoActual==iAnoHoy) && (iMesActual==iMesHoy) && (iDia==iDiaHoy)) {
    oCelda.innerHTML = "<div align='center' class='sHoyDomingo'><A HREF='javascript:InformaFecha("+iDia+")' class='sLinkDomingo'>"+iDia+"</A></div>";
   }
   else {
    oCelda.innerHTML = "<div align='center' class='sDiaDomingo'><A HREF='javascript:InformaFecha("+iDia+")' class='sLinkDomingo'>"+iDia+"</A></div>";
   }

}
  iColumna++;
  if (iColumna>6) {
   iColumna=0;
   iFila++;
  }
 }
 oFilaActual= oTabla.rows[0];
 oCelda=oFilaActual.cells[1];

oCelda.innerHTML = "<div align='center' class='sNombreMes'>"+DevuelveMes((iMesActual+1))+" - "+iAnoActual+"</div>";
   
}
function DevuelveMes(iMes) {
 var sMeses= new Array;
 sMeses[0] = 'Enero';
 sMeses[1] = 'Febrero';
 sMeses[2] = 'Marzo';
 sMeses[3] = 'Abril';
 sMeses[4] = 'Mayo';
 sMeses[5] = 'Junio';
 sMeses[6] = 'Julio';
 sMeses[7] = 'Agosto';
 sMeses[8] = 'Septiembre';
 sMeses[9] = 'Octubre';
 sMeses[10] = 'Noviembre';
 sMeses[11] = 'Diciembre';
 return sMeses[iMes-1];
}

PonerCalendario();
 document.getElementById('oCalendario').style.left = iPosicionX+iDesplazamientoIzquierda;
 document.getElementById('oCalendario').style.visibility = 'visible' ;
}

function CierraCalendario() {
 document.getElementById('oCalendario').style.visibility = 'hidden' ;

}
</script>

Este código es el estilo que vamos a utilizar. También se puede guardar en un fichero css o dentro del html:

.sDiaDomingo {  font-family: Arial; font-size: 12px; color: #FF0000}
.sHoyDomingo {  font-family: Arial; font-size: 12px; font-weight: bold; color: #FF0000}
.blanco_der {
filter: Alpha(Opacity=50); 
}
.blanco_inf {
background-image: url(imagen/marco/blanco_inf.gif);
filter: Alpha(Opacity=50); 
}
.sombra_esq {
background-image: url(imagen/marco/fon_esq.gif);
filter: Alpha(Opacity=50); 
}

.sombra_der {
background-image: url(imagen/marco/fon_der.gif);
background-repeat: repeat-y;
filter: Alpha(Opacity=50); 
}

td.sombra_inf {
background-image: url(imagen/marco/fon_inf.gif);
background-repeat: repeat-x;
filter: Alpha(Opacity=50); 
}
.marco_calendario {
background-color: #ffffff;
border-width :1px;
border-style : solid;
border-color : #afa79f;
padding:0px;
}
.1 {
background-color: #ffffff;
border-top : 1px #afa79f solid;
border-left : 1px #afa79f solid;
}
.2 {
background-color: #ffffff;
border-top : 1px #afa79f solid;
border-right : 1px #afa79f solid;
}
.3 {
background-color: #ffffff;
border-left : 1px #afa79f solid;
border-bottom : 1px #afa79f solid;
}
.4_calend {
background-color: #ffffff;
border-right : 1px #afa79f solid;
border-bottom : 1px #afa79f solid;
padding: 0px;
}

</style>

Esta parte de código debe insertarse dentro del archivo html donde esté el formulario. Para aplicaciones PHP se podría guardar en archivo independiente y usar con include().

</TD>
        <TD class='sombra_der'> </TD>
      </TR>
      <TR>
        <TD class='blanco_inf'><IMG SRC='http://bp0.blogger.com/_Ea-k09lFw4k/RaYEZNZwKcI/AAAAAAAAABQ/C2GtITw05Oc/s200/trans.gif' WIDTH='5' HEIGHT='5' BORDER=0 ALT=''></TD>
        <TD class='sombra_inf'></TD>
        <TD class='sombra_esq'></TD>
      </TR>
    </TABLE>

</div>

Y aquí está el codigo que muestra el campo para la fecha con el calendario a su derecha:

Voy a intentar explicar como funciona.

La función que hace la llamada al calendario cuando se hace clic en la imagen es:

MuestraCalendario(event,'fecha',miForm.fecha.value,true)

event hace referencia al evento producido (el clic del ratón).

fecha es el nombre del campo.

miForm.fecha.value contiene el valor del campo

true permite retroceder en el calendario a una fecha anterior a la actual. Si este valor es false no dejará ver el mes anterior.

Al llamar a esta función mostramos la capa que contiene el calendario y nos permite elegir fecha para nuestro campo del formulario.

He documentado el código para que esté bien legible y se pueda alterar "al gusto".

A disfrutarlo.

Bitácora de Manuweb

jueves, 11 de enero de 2007

Selector de fecha en Javascript

1 comentario:

Etiquetas

Archivo del blog

Mis webs favoritas