<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/**************************************************************
Calendario con selector. Script creado por Tunait! (8/8/2004) Actualizado el 28-Ene.-07
Script de libre uso con la condición de que permanezcan intactas estas líneas, osea, los créditos.
Distribución no autorizada en sitios de script sin previa autorización
Ver condiciones de uso en http://javascript.tunait.com/
****************************************************************/
var idContenedor = "miCalendario"
var hoy = new Date()
var mes = hoy.getMonth()
var dia = 1
var anio = hoy.getFullYear()
var diasSemana = new Array ('L','M','M','J','V','S','D')
var meses = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre')
var tunIex=navigator.appName=="Mozilla Firefox"?true:false;
if(tunIex && navigator.userAgent.indexOf('Opera')>=0){tunIex = false}
tunOp = navigator.userAgent.indexOf('Opera')>=0 ? true: false;
function tunCalendario(){
dia2 = dia
tab = document.createElement('table')
tab.id = 'calendario'
document.getElementById(idContenedor).appendChild(tab)
tcabeza = document.createElement('thead')
tab.appendChild(tcabeza)
fi2 = document.createElement('tr')
fi2b = document.createElement('th')
fi2b.colSpan = 7
fi2.id = 'mesCalendario'
fi2b.appendChild(document.createTextNode(meses[mes] + " - " + anio))
fi2.appendChild(fi2b)
tcabeza.appendChild(fi2)
fi = document.createElement('tr')
tcabeza.appendChild(fi)
for(m=0;m<7;m++){
ce = document.createElement('th')
ce.appendChild(document.createTextNode(diasSemana[m]))
fi.appendChild(ce)
if(m == 6){ce.style.marginRight = 0}
}
var escribe = false
var escribe2 = true
fecha = new Date(anio,mes,dia)
var d = fecha.getDay()-1 //dia semana
if(d<0){d = 6}
tcuerpo = document.createElement('tbody')
tab.appendChild(tcuerpo)
while(escribe2){
fi = document.createElement('tr')
co = 0
for(t=0;t<7;t++){
ce = document.createElement('td')
if(escribe && escribe2){
fecha2 = new Date(anio,mes,dia)
if(fecha2.getMonth() != mes){escribe2 = false;}
else{ce.appendChild(document.createTextNode(dia));dia++;co++}
}
if(d == t && !escribe){
ce.appendChild(document.createTextNode(dia))
dia++;co++
escribe = true
}
fi.appendChild(ce)
if(hoy.getDate()+1 == dia && mes == hoy.getMonth() && anio == hoy.getFullYear()){ce.className = "Hoy"}
}
if(co>0){tcuerpo.appendChild(fi)}
}
dia = dia2
}
function borra(){
document.getElementById(idContenedor).removeChild(document.getElementById('calendario'))
}
function establecerFecha(){
tunFe = new Date()
document.getElementById('tunMes').options[tunFe.getMonth()].selected = true
document.getElementById('tunAnio').value = tunFe.getFullYear()
}
function mostrarContenido(){
document.getElementById('contenido').style.visibility="visible";
}
function ocultarContenido(){
document.getElementById('contenido').style.visibility="hidden";
}
</script>
<style type="text/css">
#calendario{
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
}
/*#mesCalendario para configurar aspectos de la caja que muestra el mes y el año*/
#mesCalendario{
font-weight: bold;
text-align: center;
color: #CC6633;
background-color: #E4CAAF;
}
#calendario th, #calendario td{
border: 1px solid #999999;
padding: 3px;
font-size: 110%;
}
#calendario th{
color: #CC6633;
}
/*.Hoy para configurar aspectos de la caja que muestra el día actual*/
.Hoy{
color: #990000;
font-weight: bold;
cursor:pointer;
background-repeat: no-repeat;
background-color: #AEAEFF;*/
}
.capa_borde {
border: 1px solid #000000;
position: absolute;
}
#miCalendario{
position: absolute;
height: 198px;
width: 187px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
left: 27px;
top: 103px;
visibility: visible;
z-index: 2;
}
/*.selectores para configurar aspectos de los campos para el mes y el año*/
.selectores{
font-family: verdana;
font-size: 12px;
color: #990000;
margin-bottom: 2px;
}
#contenido {
position:absolute;
left:28px;
width:232px;
height:73px;
z-index:4;
top: 4px;
visibility: hidden;
}
#selectores {
position:absolute;
left:17px;
top:81px;
width:208px;
height:28px;
z-index:5;
}
#capa_borde {
position:absolute;
left:23px;
top:67px;
width:194px;
height:235px;
z-index:1;
}
#cerrar {
position:absolute;
left:190px;
top:65px;
width:41px;
height:22px;
z-index:3;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body onload="tunCalendario();establecerFecha()" >
<div id="miCalendario" onclick="mostrarContenido()"></div>
<div id="contenido"><div id="cerrar" onClick="ocultarContenido()"><img src="imagenes/gif/cerrar3.gif" alt="cerrar" width="40" height="20" /></div>
<table width="249" height="73" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="231"><img src="imagenes/gif/boc_calendario.gif" alt="contenido" width="230" height="103" /></td>
</tr>
</table>
</div>
<div id="selectores">
<div align="center">
<select name="select" class="selectores" id="tunMes" onchange="mes=this.selectedIndex;borra();tunCalendario()">
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
<select name="select" class="selectores" id="tunAnio" onchange="if(!isNaN(this.value)){anio=this.value;borra();tunCalendario()}">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
</div>
<div class="capa_borde" id="capa_borde"></div>
</body>
</html>