///////////////////////////////////////////////////////////////////////////////////////////////////////// // FUNCIONES PARA CREAR EL CALENDARIO Y LA VENTANA DE SELECCION DE FECHAS // Autor: Oscar Hernandez Caballero // Ultima revision: Febrero de 2010 ///////////////////////////////////////////////////////////////////////////////////////////////////////// // COMO USAR ESTAS FUNCIONES: // // 1. incluir en el el código // // // // // // // // 2. incluir despues de este codigo // // //
// //
// // // 3. Para mostrar la ventana de seleccion de fechas desde un input text con id="fecha_ejemplo" poner el código.... // // // // // 4. Para mostrar un calendario desde un input text con id="fecha_ejemplo" de un formulario "formEjemplo" poner el código.... // //   // ///////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////// // variables de las imagenes del calendario ////////////////////////////////////////////// calFleIzq=new Image calFleIzq.src="images/calFleIzq.gif" calFleDer=new Image calFleDer.src="images/calFleDer.gif" calCerrar=new Image calCerrar.src="images/calCerrar.gif" ////////////////////////////////////////////// ///////////////////////////////////////////////////// // funcion que recupera las coordenadas del raton /////////////////////////////////////////////////// var posX,posY; document.onmousemove = setMouseCoords; function setMouseCoords(e) { if(document.all) { posX = window.event.clientX; posY = window.event.clientY; } else { posX = e.pageX; posY = e.pageY; } } /////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////// // VALIDACION DE LA VENTANA DE SELECCION DE FECHAS ///////////////////////////////////////////////// // Estado del codigo: ESTABLE /////////////////////////////////////////////////////////////////////////////////////////////////// function Aceptar(camposeleccion) { var strFecha; var fecha_desde; var fecha_hasta; // comprobamos que las fechas sean correctas, y fechaDesde sea <= a la fechaHasta fecha_desde = document.formSeleccionFechas.fechaDesde.value; fecha_hasta = document.formSeleccionFechas.fechaHasta.value; if (!chkFechaOk(fecha_desde) && fecha_desde != '') { alert ("La fecha Desde es incorrecta"); return false; } if (!chkFechaOk(fecha_hasta) && fecha_hasta != '') { alert ("La fecha Hasta es incorrecta"); return false; } if (chkEsMenor(fecha_hasta, fecha_desde)) { alert("La fecha Hasta no puede ser menor que la fecha Desde"); return false; } if (fecha_desde == '' && fecha_hasta == '' && !(document.formSeleccionFechas.vacio.checked)) { alert("Elija al menos una fecha o vacio"); return false; } if ( (fecha_desde != '' || fecha_hasta != '') && (document.formSeleccionFechas.vacio.checked)) { alert("Si selecciona una fecha no puede seleccionar que el campo este vacio"); return false; } // si todo ha ido bien... hideVentanaSeleccionFechas(); // damos formato a la visualización de la fecha if (fecha_desde == fecha_hasta) { strFecha = '=' + fecha_desde; } if (fecha_desde == '' && fecha_hasta != '') { strFecha = '<=' + fecha_hasta; } if (fecha_desde != '' && fecha_hasta == '') { strFecha = '>=' + fecha_desde; } if (fecha_desde == '' && fecha_hasta == '') { strFecha = ''; } if (chkEsMenor(fecha_desde, fecha_hasta)) { strFecha = '(' + fecha_desde + ',' + fecha_hasta + ')'; } if (document.formSeleccionFechas.omitir.checked) { strFecha = 'NO' + strFecha; } if (document.formSeleccionFechas.vacio.checked) { strFecha = strFecha + '='; } // asignamos la cadena construida al input text de la fecha eval('document.getElementById("'+camposeleccion+'").value="'+strFecha+'";'); //eval('document.' + formularioseleccion + '.' + camposeleccion + '.value=strFecha'); } //////////////////////////////////////////////////////////////////////////////////////////////// // ///////////////////////////////////////////////////////////////////////////////////////////// // FUNCION QUE MUESTRA LA VENTANA DE SELECCION DE FECHAS // Estado del codigo: ESTABLE // ///////////////////////////////////////////////////////////////////////////////////////////// function showVentanaSeleccionFechas(campo, textoCampo) { var VentanaHTML = ''; VarCerrar="hideVentanaSeleccionFechas();"; VentanaHTML = VentanaHTML + '
'; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + '
'; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + '
'; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + '
' + textoCampo + ''; VentanaHTML = VentanaHTML + '
'; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + ''; VentanaHTML = VentanaHTML + '
fecha Desde:
fecha Hasta:
omitir:
vacío:
'; VentanaHTML = VentanaHTML + '
'; VentanaHTML = VentanaHTML + '
'; VentanaHTML = VentanaHTML + '
'; VentanaHTML = VentanaHTML + '
'; /////////////////////////////////////////////////////////////////////////////////// document.getElementById("ventanaSeleccionFechas").style.top = (posY+20) + "px"; document.getElementById("ventanaSeleccionFechas").style.left = posX + "px"; document.getElementById("ventanaSeleccionFechas").innerHTML = VentanaHTML; document.getElementById("ventanaSeleccionFechas").style.display = "block"; } ////////////////////////////////////////////////////////////////////////////////// // FUNCIONES QUE OCULTA LAS VENTANAS DE SELECCION DE FECHAS // Estado del codigo: ESTABLE ///////////////////////////////////////////////////////////////////////////////// function hideVentanaSeleccionFechas() { document.getElementById("ventanaSeleccionFechas").style.display = "none"; } function hideVentanaCalendario() { document.getElementById("ventanaCalendario").style.display = "none"; } ////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////// // función muestraCalendario() // Estado del codigo: ESTABLE ///////////////////////////////////////////////////////////////////////////////// function muestraCalendario(valorFormulario, valorCampo, x, y) { CrearCalendario(); controlCalendario(valorFormulario, valorCampo, x+10, y+20); } /////////////////////////////////////////////////////////////////// //Ocultamos las ventanas dependiendo de las que estén abiertas//// ///////////////////////////////////////////////////////////////// var ventanaCalendario; var ventanaSeleccionFechas; ventanaCalendario = true; ventanaSeleccionFechas = true; ///////////////////////////////////////////////////////////////////////////////////////// // function controlCalendario: pone la capa ventanaCalendario visible // Estado del codigo: ESTABLE ////////////////////////////////////////////////////////////////////////////////////////// function controlCalendario(valorFormulario, valorCampo, x, y){ formulario = valorFormulario; campo = valorCampo; if(ventanaCalendario==true){ window.document.getElementById('ventanaCalendario').style.visibility="visible"; window.document.getElementById('ventanaCalendario').style.top = y; window.document.getElementById('ventanaCalendario').style.left = x; } } /////////////////////////////////////////////////////////////////////////////////////////////// // funcion Verificar // Estado del codigo: ESTABLE /////////////////////////////////////////////////////////////////////////////////////////////// function Verificar(FechaDif, Dif) { var HoyDif = new Date(FechaDif); var Aux = new Date(FechaDif); if (Dif==0) { if (HoyDif.getMonth() == 0) { HoyDif.setMonth(11); HoyDif.setYear(HoyDif.getFullYear()-1); } else { HoyDif.setMonth((HoyDif.getMonth()-1)); } } else { //corregido por Oscar en Enero de 2006 HoyDif.setMonth(HoyDif.getMonth()+1); if ((HoyDif.getMonth() - Aux.getMonth()) == 2) { HoyDif.setDate(1); HoyDif.setMonth(Aux.getMonth()+1); } } document.getElementById('ventanaCalendario').innerHTML = Calendario(HoyDif); } /////////////////////////////////////////////////////////////////////////////////////////////// // funcion DiaSel // Estado del codigo: ESTABLE /////////////////////////////////////////////////////////////////////////////////////////////// function DiaSel(FechaSel, Dia) { var HoySel=new Date(FechaSel); HoySel.setDate(Dia) var FechaSeleccionada; var diaSeleccionado; var mesSeleccionado; diaSeleccionado = HoySel.getDate(); mesSeleccionado = eval(HoySel.getMonth()+1); if ( diaSeleccionado < 10) { diaSeleccionado = "0" + diaSeleccionado; } if ( mesSeleccionado < 10) { mesSeleccionado = "0" + mesSeleccionado; } FechaSeleccionada = (diaSeleccionado + "/" + mesSeleccionado + "/" + HoySel.getFullYear()); //alert (FechaSeleccionada); eval('document.' + formulario + '.' + campo + '.value=FechaSeleccionada'); hideVentanaCalendario(); } /////////////////////////////////////////////////////////////////////////////////////////////// // funcion Calendario: devuelve el HTML del calendario con el dia actual marcado // Estado del codigo: ESTABLE /////////////////////////////////////////////////////////////////////////////////////////////// function Calendario(Fecha) { var Hoy=new Date(Fecha); var Hoy2="'" + Hoy + "'" var EsteDia; var DiasPorMes=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; Anyo=Hoy.getFullYear(); EsteDia=Hoy.getDate(); // Actualizacion del mes de Febrero (por los anyos bisiestos) if (((Anyo % 4 == 0) && (Anyo % 100 != 0)) || (Anyo % 400 == 0)) DiasPorMes[1] = 29; // Numero de dias del mes actual NDias =DiasPorMes[Hoy.getMonth()]; // Calculo que dia de la semana es el primero del mes PrimerDia=Hoy; PrimerDia.setDate(1); // Observacion: Obtengo el dia de hoy (p.e, 10-11-1999) y calculo que dia de la semana // es el dia 1 del mismo mes y año (p.e, 1-11-1999) Comienzo=PrimerDia.getDay(); if (Comienzo==0) Comienzo = 6 else Comienzo = Comienzo - 1; var CalendarioTexto = ''; CalendarioTexto = '
' CalendarioTexto = CalendarioTexto + '
' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' /////////////////////Cabecera, nombre mes var Mes = ""; switch (Hoy.getMonth()+1){ case 1: Mes = "Enero"; break; case 2: Mes = "Febrero"; break; case 3: Mes = "Marzo"; break; case 4: Mes = "Abril"; break; case 5: Mes = "Mayo"; break; case 6: Mes = "Junio"; break; case 7: Mes = "Julio"; break; case 8: Mes = "Agosto"; break; case 9: Mes = "Septiembre"; break; case 10: Mes = "Octubre"; break; case 11: Mes = "Noviembre"; break; case 12: Mes = "Diciembre"; break; default: Mes = "Error"; break; } CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '
' //////////////////////Mes anterior CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' /////////////////////Mes siguiente CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + Mes +' de ' + Anyo + '' /////////////////////Cerrar calendario/ VarCerrar="hideVentanaCalendario();" CalendarioTexto = CalendarioTexto + ' 
' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + ""; columna=0; for (i=0; i"; columna++; CalendarioTexto = CalendarioTexto + "" } // Escritura de los dias del mes for (i=1; i<=NDias; i++) { CalendarioTexto = CalendarioTexto + ""; columna++; if (columna == 7) { CalendarioTexto = CalendarioTexto + ""; columna=0; } } CalendarioTexto = CalendarioTexto + ""; CalendarioTexto = CalendarioTexto + '
LMXJVSD
"; CalendarioTexto = CalendarioTexto + ''; //alert(i + ' / ' + EsteDia); if (i == EsteDia) { CalendarioTexto = CalendarioTexto + "" } else if (columna == 6) { CalendarioTexto = CalendarioTexto + "" } else { CalendarioTexto = CalendarioTexto + ""; } CalendarioTexto = CalendarioTexto + '
'+i+'
'; CalendarioTexto = CalendarioTexto + " "; CalendarioTexto = CalendarioTexto + ''; CalendarioTexto = CalendarioTexto + "
' CalendarioTexto = CalendarioTexto + '
' CalendarioTexto = CalendarioTexto + '' CalendarioTexto = CalendarioTexto + '
' CalendarioTexto = CalendarioTexto + '
' CalendarioTexto = CalendarioTexto + '
' return CalendarioTexto } ////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////// // funcion Calendario: devuelve el HTML del calendario con el dia actual marcado // Estado del codigo: ESTABLE /////////////////////////////////////////////////////////////////////////////////////////////// function CrearCalendario() { var FechaActual=new Date(); //document.getElementById('ventanaCalendario').innerHTML = Calendario(FechaActual); document.getElementById("ventanaCalendario").style.top = (posY+20) + "px"; document.getElementById("ventanaCalendario").style.left = posX + "px"; document.getElementById("ventanaCalendario").innerHTML = Calendario(FechaActual); document.getElementById("ventanaCalendario").style.display = "block"; } //////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////// F I N D E C O D I G O E S T A B L E ////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////