Tengo un calendario creado con Javascript y CSS y me gustaria que cuando se haga click en alguna fecha aparezca la fecha seleccionada en un capa con formato dia, mes y año.... soy nueva en Javascript y la verdad que estoy algo perdia, si alguine se le ocurre como hacerlo, estaria muy agradecida. Aqui os dejo el codigo del calendario
Código HTML:
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));
ce.onclick = function() {mostrarContenido("05/05/2010")}
dia++;
co++;
}
}
if(d == t && !escribe)
{
ce.appendChild(document.createTextNode(dia));
dia++;
co++;
escribe = true;
}
fi.appendChild(ce);
ce.className = "dia";
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(fecha){
alert (fecha);
document.getElementById('contenido').style.visibility="visible";
}
function ocultarContenido(){
document.getElementById('contenido').style.visibility="hidden";
}
</script>
<style type="text/css">
.sol {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0066CC;
}
.subrayado {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
color: #000000;
text-decoration: underline;
text-align: left;
}
#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*/
.dia{
color: #black;
font-weight: bold;
cursor:pointer;
}
.Hoy{
color: #990000;
font-weight: bold;
cursor:pointer;
background-repeat: no-repeat;
background-color: #AEAEFF;
}
.capa_borde {
border: 1px solid #999999;
position: absolute;
}
#miCalendario{
position: absolute;
height: 179px;
width: 187px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
left: 27px;
top: 147px;
z-index: 6;
visibility: visible;
}
/*.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:8px;
width:232px;
height:122px;
z-index:4;
top: 14px;
visibility: visible;
}
#selectores {
position:absolute;
left:17px;
top:125px;
width:208px;
height:28px;
z-index:5;
visibility: visible;
}
#capa_borde {
position:absolute;
left:16px;
top:114px;
width:208px;
height:209px;
z-index:2;
}
#cerrar {
position:absolute;
left:192px;
top:99px;
width:41px;
height:22px;
z-index:3;
}
#sol {
position: absolute;
width: 198px;
left: 31px;
top: 24px;
height: 81px;
}
#fecha {
}
#fecha {
position:absolute;
left:29px;
top:5px;
width:202px;
height:20px;
z-index:5;
background-color: #B6B6BE;
}
.salidas {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: right;
}
#tabla {
position:absolute;
left:29px;
top:27px;
width:202px;
height:71px;
z-index:4;
}
.azul_peq { font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0066CC;
text-align: left;
}
</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" ></div>
<div id="contenido">
<div class="capa_borde" id="tabla">
<table width="202" height="60">
<tr>
<td colspan="2"><strong class="sol">EL SOL</strong></td>
<td width="87" class="sol">SANTOS</td>
</tr>
<tr>
<td width="59" class="subrayado"><span class="ninguno"><img src="imagenes/gif/punto.gif" alt="punto" width="8" height="8" /> <span class="subrayado">SALE</span></span></td>
<td width="41"><span class="salidas"><?php echo $horaamanecer?></span></td>
<td> </td>
</tr>
<tr>
<td class="subrayado"><img src="imagenes/gif/punto.gif" alt="punto" width="8" height="8" /> SE PONE </td>
<td><span class="salidas"><?php echo $horaatardecer?></span></td>
<td><select name="c_santos" size="1" id="select">
<?php
$x=0;
$tam = count($santo_a);
while ($x<$tam)
{
?>
<option><?php echo $santo_a[$x]; ?></option>
<?php $x=$x+1;
}
?>
</select></td>
</tr>
</table>
</div>
<div class="capa_borde" id="fecha"></div>
<div id="cerrar" onClick="ocultarContenido()"><img src="imagenes/gif/cerrar3.gif" alt="cerrar" width="41" height="21" /></div>
<img src="imagenes/planos/gif/flecha_calendario.gif" width="34" height="103" /></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> 
