P: ¿Como puedo poner un calendario para seleccionar los campos fecha?
R: Calendario.htm Código PHP:
<html>
<head>
<script language="JavaScript">
var dFec = new Date();
var aMonthNames = new Array(
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December");
function firstOfMonth(dFec){
var dRes = new Date();
dRes.setYear(dFec.getYear());
dRes.setMonth(dFec.getMonth());
dRes.setDate(1);
return dRes;
}
function lastDayOfMonth(dFec){
var dRes = new Date();
var nYear = dFec.getYear();
var nMonth = dFec.getMonth() + 1;
if (nMonth == 12){
nMonth = 0;
nYear++;
}
dRes.setYear(nYear);
dRes.setMonth(nMonth);
dRes.setDate(1);
return new Date(dRes.valueOf() - (24 * 60 * 60 * 1000));
}
function dayToWrite(nDay){
var dToday = new Date();
var bisThisMonth = ((dFec.getYear() == dToday.getYear()) && (dFec.getMonth() == dToday.getMonth()));
var sDay = String(nDay);
sDay = (nDay == dFec.getDate() && bisThisMonth? "<b><font color='red'>" + sDay + "</font></b>": sDay);
return sDay;
}
function selectDay(nDay){
var sRes, sDay, sMon, sYea;
sDay = "0" + String(nDay);
sDay = sDay.substr(sDay.length - 2, 2);
sMon = "0" + String(dFec.getMonth() + 1);
sMon = sMon.substr(sMon.length - 2, 2);
sYea = String(dFec.getFullYear());
sRes = sDay + "/" + sMon + "/" + sYea;
opener.document.forms[0].dateResult.value = sRes;
opener.fillDateField();
close();
}
function showCalenContents(){
var dFec0 = firstOfMonth(dFec);
var nDay = 1;
var nLastDay = lastDayOfMonth(dFec).getDate();
var sWeek = "";
var bEnd = false;
var bWri = false;
var nDOW0 = dFec0.getDay();
for (var j = 0; !bEnd; j++){
sWeek = "<tr>";
for (var i = 0; (i < 7) && !bEnd; i++){
bWri = bWri || (i == nDOW0);
if (bWri)
sWeek += "<td align='right' style='cursor: hand' onclick='parent.selectDay(" + String(nDay) + ")'>" + dayToWrite(nDay, bWri) + "</td>";
else
sWeek += "<td> </td>";
if (bWri) nDay++;
bEnd = (nDay > nLastDay);
}
if (bEnd)
for (var k = i; k < 7; k++)
sWeek = sWeek + "<td> </td>";
window.usefull.document.writeln(sWeek + "</tr>");
}
}
function backMonth(){
var nMonth = dFec.getMonth();
var nYear = dFec.getFullYear();
if (--nMonth == -1){
nMonth = 11;
nYear--;
}
dFec.setMonth(nMonth);
dFec.setYear(nYear);
calendary();
}
function forthMonth(){
var nMonth = dFec.getMonth();
var nYear = dFec.getFullYear();
if (++nMonth == 12){
nMonth = 0;
nYear++;
}
dFec.setMonth(nMonth);
dFec.setYear(nYear);
calendary();
}
function backYear(){
var nYear = dFec.getFullYear();
dFec.setYear(--nYear);
calendary();
}
function forthYear(){
var nYear = dFec.getFullYear();
dFec.setYear(++nYear);
calendary();
}
function showCalen(){
with (window.usefull.document){
write("<table border='0' width='100%' height='100%'><tr><td><table border='0' width='100%'><tr>");
write("<td width='10'><input type='button' name='bckYear' value='<<' onclick='parent.backYear()'></td>");
write("<td width='10'><input type='button' name='bckMonth' value='<' onclick='parent.backMonth()'></td>");
write("<td align='center'><b>" + aMonthNames[dFec.getMonth()].substr(0, 3) + ", " + String(dFec.getYear()) + "</b></td>");
write("<td width='10'><input type='button' name='ForMonth' value='>' onclick='parent.forthMonth()'></td>");
write("<td width='10'><input type='button' name='ForYear' value='>>' onclick='parent.forthYear()'></td>");
write("</tr></table></tr><tr><td>");
write("<table border='0'>");
write("<tr><td><b>Su</b></td><td><b>Mo</b></td><td><b>Tu</b></td><td><b>We</b></td><td><b>Th</b></td><td><b>Fr</b></td><td><b>Sa</b></td></tr>");
showCalenContents();
write("</table></td></tr></table>");
}
}
function calendary(){
with (window.usefull.document){
open();
writeln("<html><head></head><body>");
writeln("<form name='frm'>");
showCalen();
writeln("</form></body></html>");
close();
}
}
</script>
<head>
<frameset rows="100%,*" border="0" frameborder="no" framespacing="0" onload="calendary()">
<frame name="usefull" src="DummyPg.htm" frameborder="no" marginheight="0" marginwidth="0" scrolling="no">
<frame name="useless" src="DummyPg.htm" frameborder="no" marginheight="0" marginwidth="0" scrolling="no">
</frameset>
<html>
Modo de uso:
testCalen.htm Código PHP:
<html>
<head>
<script language="JavaScript">
var nInput;
function calen(n){
var oWnd;
nInput = n;
oWnd = open("Calendario.htm", "fechas", "location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no,width=180,height=200");
oWnd.focus();
}
function fillDateField(){
with (document.frm)
if (nInput == 1)
fechaInicial.value = dateResult.value;
else
fechaFinal.value = dateResult.value;
}
</script>
<head>
<body>
<form name="frm">
<table border="0">
<tr>
<td>
Desde
</td>
<td>
<input type="text" name="fechaInicial">
<input type="button" value="..." onclick="calen(1)">
</td>
</tr>
<tr>
<td>
Hasta
</td>
<td>
<input type="text" name="fechaFinal">
<input type="button" value="..." onclick="calen(2)">
</td>
</tr>
</table>
<input type="hidden" name="dateResult">
</form>
<body>
<html>
Página "dummy":
DummyPg.htm Código PHP:
<html>
<head>
</head>
<body>
</body>
</html>