martes, 29 de julio de 2008

Selección de una fecha de inicio y una fecha fin.

Selección de una fecha de inicio y una fecha fin.Antes de utilizar este código es necesario adquirir el código js y la hoja de estilos, esto se puede conseguir en la siguiente dirección: http://www.javascriptkit.com/script/script2/epoch/index.shtml


Código JavaScript (dentro del segmento HEAD)

<link rel="stylesheet" type="text/css" href="../js/epoch_styles.css" /> <!--Epoch's styles-->
<script type="text/javascript" src="../js/epoch_classes.js"></script> <!--Epoch's Code-->
<script language="javascript">
var bas_cal,dp_cal,ms_cal;
window.onload = function () {
bas_cal = new Epoch('epoch_basic','flat',document.getElementById('FechaInicio'));
dp_cal = new Epoch('epoch_basic','flat',document.getElementById('FechaFin'));
bas_cal.hide();
dp_cal.hide();
}
function _fnPresentaCalendario(){
var a = document.getElementById("SeleccionaFechas");
a.style.visibility = "visible";
bas_cal.show();
dp_cal.show();
}
function _fnEscondeCalendario(){
_objFechaInicio = document.getElementById("txtFechaInicioSeleccionada");
_objFechaFin = document.getElementById("txtFechaFinSeleccionada");
if (bas_cal.selectedDates.length > 0){
_objFechaInicio.value = bas_cal.selectedDates[0].dateFormat();
}
if (dp_cal.selectedDates.length > 0){
_objFechaFin.value = dp_cal.selectedDates[0].dateFormat();
}
if (Date.parse(_objFechaInicio.value) > Date.parse(_objFechaFin.value) )
{
alert("El rango de fechas seleccionadas no es válido.");
}
else
{
bas_cal.hide();
dp_cal.hide();
var a = document.getElementById("SeleccionaFechas");
a.style.visibility = "hidden";
Form1.submit();
}
}
</script>


Código HTML (Dentro del segmento HTML)

<input id="txtFechaInicioSeleccionada" type=text value="2008/01/01">
<input id="txtFechaFinSeleccionada" type=text value="2008/01/31">
<a href="#" onclick="_fnPresentaCalendario()">(Cambiar rango de fechas)</a><div id="SeleccionaFechas" style="BORDER-RIGHT: 2px solid; BORDER-TOP: 1px solid; DISPLAY: inline; Z-INDEX: 101; VISIBILITY: hidden; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 2px solid; POSITION: absolute; BACKGROUND-COLOR: white; TEXT-ALIGN: center">
<table >
<tr>
<td >Desde:</td>
<td></td>
<td>Hasta:</td>
</tr>
<tr>
<td align="right" colSpan="3">&nbsp;</td>
</tr>
<tr>
<td align="center">
<div id="FechaInicio"></div>
</td>
<td>&nbsp;</td>
<td align="center">
<div id="FechaFin"></div>
</td>
</tr>
<tr>
<td align="right" colSpan="3">
<A class="AccionesVentanaMensajesUsuario" onclick="_fnEscondeCalendario()">Aceptar</A>
</td>
</tr>
</table>
</div>

No hay comentarios:

Búsqueda