P:¿Como puedo hacer un selector de fecha basado en tags <select> que permita seleccionar cualquier fecha válida hasta el día de hoy?
R:
Esta es una modificacion sobre el ejemplo 111 de Kaopectate.
Me ha sido muy util ese ejemplo y le he hecho unas modificaciones que creo que lo hacen mejor.
-Con el codigo del FAQ 111, debes seleccionar primero el año, luego el mes y finalmente el dia. Cuando cambias el año, los campos mes y dia se resetean y cuando cambias el mes, el campo dia se resetea.
En la modificacion esto ya no ocurre puedes seleccionar las caracteristicas en el orden que quieras y si cambias una el resto no se resetean.
La unica restriccion es que por ejemplo tengas elegido como dia el 31 de Enero y cambies en el campo "mes" Enero por Abril, en este caso te seleccionaria el ultimo dia disponible, osea el 30 de abril.
Código PHP:
<?php BEGIN__VBULLETIN__CODE__SNIPPET <html>
<head>
<script language="JavaScript">
var aMeses = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre")
function padNmb(nStr, nLen, sChr){
var sRes = String(nStr);
for (var i = 0; i < nLen - String(nStr).length; i++)
sRes = sChr + sRes;
return sRes;
}
function makeDateFormat(nDay, nMonth, nYear){
var sRes;
sRes = padNmb(nDay, 2, "0") + "/" + padNmb(nMonth, 2, "0") + "/" + padNmb(nYear, 4, "0");
return sRes;
}
function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion = new Option(sTxt, sVal);
oCntrl.options.add(selOpcion, iPos);
}
function lastDayOfMonth(nMonth, nYear){
var aMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if ((nMonth == 2) && (nYear % 4 == 0))
return 29;
else
return aMonth[nMonth - 1];
}
function cambia(nCambiado){
var nAno;
var nMes;
with (document.frm){
nAno = parseInt(ano.options[ano.selectedIndex].value);
switch (nCambiado){
case 0:
llenaMes(mes, nAno);
nMes = parseInt(mes.options[mes.selectedIndex].value);
nDia = parseInt(dia.options[dia.selectedIndex].value);
res.value = makeDateFormat(nDia, nMes + 1, nAno);
break;
case 1:
nMes = parseInt(mes.options[mes.selectedIndex].value);
llenaDia(dia, nAno, nMes);
nDia = parseInt(dia.options[dia.selectedIndex].value);
res.value = makeDateFormat(nDia, nMes + 1, nAno);
break;
case 2:
nMes = parseInt(mes.options[mes.selectedIndex].value);
nDia = parseInt(dia.options[dia.selectedIndex].value);
res.value = makeDateFormat(nDia, nMes + 1, nAno);
break;
case 3:
llenaMes(mes, nAno);
break;
}
}
}
function llenaAno(oAno){
var hoy = new Date();
var ini = 1960;
for (var i = ini; i <= hoy.getYear(); i++)
addOpt(oAno, i - ini, String(i), String(i));
oAno.options[i-ini-1].selected = true;
cambia(3);
}
function llenaMes(oMes, nAno){
var hoy = new Date();
var sel=0;
if(oMes.selectedIndex >=0) var sel=oMes.selectedIndex;
var nFin = 11;
while (oMes.length > 0) oMes.remove(0);
if (nAno == hoy.getYear())
{
nFin = hoy.getMonth();
}
if (sel>nFin)
{
sel=nFin-1;
}
for (var i = 0; i <= nFin; i++)
addOpt(oMes, i, aMeses[i], String(i));
oMes.options[sel].selected = true;
cambia(1);
}
function llenaDia(oDia, nAno, nMes){
var hoy = new Date();
var sel=0;
if(oDia.selectedIndex >=0) var sel=oDia.selectedIndex;
var nFin = lastDayOfMonth(nMes + 1, nAno);
while (oDia.length > 0) oDia.remove(0);
if (nAno == hoy.getYear() && nMes == hoy.getMonth())
{
nFin = hoy.getDate();
}
if(sel>nFin)
{
sel=nFin-1;
}
for (var i = 1; i <= nFin; i++)
addOpt(oDia, i, String(i), String(i));
oDia.options[sel].selected = true;
}
</script>
</head>
<body onload=" llenaAno(document.frm.ano)">
<form name="frm">
<table border="0">
<tr>
<td align="right">
Año:
</td>
<td>
<select name="ano" onchange="cambia(0)" style="width: 80">
</select>
</td>
</tr>
<tr>
<td align="right">
Mes:
</td>
<td>
<select name="mes" onchange="cambia(1)" style="width: 80">
</select>
</td>
</tr>
<tr>
<td align="right">
Día:
</td>
<td>
<select name="dia" onchange="cambia(2)" style="width: 80">
</select>
</td>
</tr>
<tr>
<td align="right">
Fecha:
</td>
<td>
<input type="text" name="res" disabled>
</td>
</tr>
</table>
</form>
</body>
</html>