Menu
this snippet of script (pretty big – soz) works like a dream in IE6 but displays wrong in Firefox.
It is supposed to have 2 boxes which are filled with dates selected by popup calendars which are displayed by clicking on the titles of the boxes.
I’ve ironed out the JAVA errors but Firefox won’t show the days on the calendar (they should be created by “function newCalendar()” )
///
<HTML>
<HEAD>
<script language=”JavaScript”>
<!–
var months = new Array(“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”);
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days = new Array(“S”, “M”, “T”, “W”, “T”, “F”, “S”);
today = new getToday();
var element_id;
id = “cal”;
id2 = “cal2”;
function hideDays( id ) {
datesel = id
if (id == “fisc”)
{ document.getElementById(‘dayDisplay’).style.display=”none”;
document.getElementById(‘dayList’).style.display=”none”;
document.getElementById(‘hidelink’).style.display=”none”;
document.getElementById(‘submitFiscal’).style.display=”inline”;
} if (id == “cal”)
{
document.getElementById(‘dayDisplay’).style.display=”inline”;
document.getElementById(‘dayList’).style.display=”inline”;
document.getElementById(‘hidelink’).style.display=”inline”;
document.getElementById(‘submitFiscal’).style.display=”none”;
}
function getDays(month, year)
{
// Test for leap year when February is selected.
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) ||
(0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}
function getToday()
{
// Generate today’s date.
this.now = new Date();
this.year = this.now.getFullYear() ; // Returned year XXXX
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
function newCalendar()
{
var parseYear = parseInt(document.getElementById(‘year’)[document.getElementById(‘year’).selectedIndex].text);
var newCal = new Date(parseYear , document.getElementById(‘month’).selectedIndex, 1);
var day = -1;
var startDay = newCal.getDay();
var daily = 0;
today = new getToday(); // 1st call
if ((today.year == newCal.getFullYear() ) && (today.month == newCal.getMonth()))
day = today.day;
// Cache the calendar table’s tBody section, dayList.
var tableCal = document.getElementById(‘dayList’); //definition a pain in Firefox – had “.tBodies.dayList”on the end when using .all.
var intDaysInMonth = getDays(newCal.getMonth(), newCal.getFullYear() );
for (var intWeek = 0; intWeek < tableCal.rows.length; intWeek++)
{
for (var intDay = 0; intDay < tableCal.rows[intWeek].cells.length; intDay++)
{
var cell = tableCal.rows[intWeek].cells[intDay];
// Start counting days.
if ((intDay == startDay) && (0 == daily))
daily = 1;
// Highlight the current day.
cell.style.color = (day == daily) ? “red” : “”;
if(day == daily)
{
document.getElementById(‘todayday’).innerText= “Today: ” + day + “/” +
(newCal.getMonth()+1) + “/” + newCal.getFullYear() ;
}
// Output the day number into the cell.
if ((daily > 0) && (daily <= intDaysInMonth))
{
cell.innerText = daily++;
}
else
{
cell.innerText = “”;
}
}
}
}
function getTodayDay()
{
document.all[element_id].value = today.day + “/” + (today.month+1) +
“/” + today.year;
document.getElementById(‘calendar’).style.display=”none”;
document.getElementById(‘year’).selectedIndex =100;
document.getElementById(‘month’).selectedIndex = today.month;
}
function getDate()
{
// This code executes when the user clicks on a day
// in the calendar.
if (“TD” == event.srcElement.tagName)
// Test whether day is valid.
if (“” != event.srcElement.innerText)
{
var mn = document.getElementById(‘month’).selectedIndex+1;
var Year = document.getElementById(‘year’)[document.getElementById(‘year’).selectedIndex].text;
document.all[element_id].value=event.srcElement.innerText+”/”+mn +”/” +Year;
document.getElementById(‘calendar’).style.display=”none”;
}
}
function getDatefisc()
{
// This code executes when the user presses button to enter fiscal date
// in the calendar.
var mn = document.getElementById(‘month’).selectedIndex+1;
var Year = document.getElementById(‘year’)[document.getElementById(‘year’).selectedIndex].text;
document.getElementById([element_id]).value=01+”/”+mn +”/” +Year;
document.getElementById(‘calendar’).style.display=”none”;
}
function GetBodyOffsetX(el_name, shift)
{
var x;
var y;
x = 0;
y = 0;
var elem = document.getElementById([el_name]);
do
{
x += elem.offsetLeft;
y += elem.offsetTop;
if (elem.tagName == “BODY”)
break;
elem = elem.offsetParent;
} while (1 > 0);
shift[0] = x;
shift[1] = y;
return x;
}
function SetCalendarOnElement(el_name)
{
if (el_name==””)
el_name = element_id;
var shift = new Array(2);
GetBodyOffsetX(el_name, shift);
document.getElementById(‘calendar’).style.pixelLeft = shift[0]; // – document.getElementById(‘calendar’).offsetLeft;
document.getElementById(‘calendar’).style.pixelTop = shift[1] + 25 ;
}
function ShowCalendar(elem_name)
{
if (elem_name==””)
elem_name = element_id;
element_id = elem_name; // element_id is global variable
newCalendar();
SetCalendarOnElement(element_id);
document.getElementById(‘calendar’).style.display=”inline”;
if (datesel == “fisc”)
document.getElementById(‘submitFiscal’).style.display=”inline”;
else
document.getElementById(‘submitFiscal’).style.display=”none”;
}
function HideCalendar()
{
document.getElementById(‘calendar’).style.display=”none”;
}
function toggleCalendar(elem_name)
{
if(document.getElementById(‘calendar’).style.display==”none”)
ShowCalendar(elem_name);
else
HideCalendar();
}
–>
</script>
<style>
.today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold}
.days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center}
.dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt}
</style>
<BODY onLoad=”hideDays( ‘cal’ )”>
<FORM name=myFromform>
<INPUT id=’MyFromdate’ name=’MyFromdate’ size=9 value=” maxlength=10>
<a href=”JavaScript:;” onClick=”toggleCalendar(‘MyFromdate’)”>(Use Calendar)</a>
</form>
</TD>
<TD width=200>
<FORM name=myToform>
<INPUT id=’MyTodate’ name=’MyTodate’ size=9 value=” maxlength=10>
<a href=”JavaScript:;” onClick=”toggleCalendar(‘MyTodate’)”>(Use Calendar)
</a>
</form>
</TD>
</TABLE>
<!– Calendar Table –>
<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=’calendar’ style=”DISPLAY: none; POSITION: absolute; Z-INDEX: 4″>
<TBODY>
<TR>
<TD colSpan=7 vAlign=center>
<!– Month combo box –>
<SELECT id=month onchange=newCalendar()>
<SCRIPT language=JavaScript>
// Output months into the document.
// Select current month.
for (var intLoop = 0; intLoop < months.length; intLoop++)
document.write(“<OPTION ” + (today.month == intLoop ? “Selected” : “”) + “>” + months[intLoop]);
</SCRIPT>
</SELECT>
<!– Year combo box –>
<SELECT id=year onchange=newCalendar()>
<SCRIPT language=JavaScript>
// Output years into the document.
// Select current year.
for (var intLoop = 1900; intLoop < 2028; intLoop++)
document.write(“<OPTION ” + (today.year == intLoop ? “Selected” : “”) + “>” + intLoop);
</SCRIPT>
</SELECT>
</TD>
</TR>
</TBODY>
<TBODY id=dayDisplay>
<TR class=days>
<!– Generate column for each day. –>
<SCRIPT language=JavaScript>
// Output days.
for (var intLoop = 0; intLoop < days.length; intLoop++)
document.write(“<TD>” + days[intLoop] + “</TD>”);
</SCRIPT>
</TR>
</TBODY>
<TBODY class=dates id=dayList onclick=”getDate(”)” vAlign=center>
<!– Generate grid for individual days. –>
<SCRIPT language=JavaScript>
for (var intWeeks = 0; intWeeks < 6; intWeeks++)
{
document.write(“<TR>”);
for (var intDays = 0; intDays < days.length; intDays++)
document.write(“<TD></TD>”);
document.write(“</TR>”);
}
</SCRIPT>
</TBODY>
<!– Generate today day. –>
<TBODY>
<TR>
<TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD>
<TD align=right colSpan=2>
<!– Show hide or submit fiscal date –>
<A href=”javascript:HideCalendar();” id=hidelink>
<SPAN style=”COLOR: black; FONT-SIZE: 10px”>
<B>Hide</B>
</SPAN>
</A>
<A href=”javascript:getDatefisc();” id=submitFiscal>
<SPAN style=”COLOR: black; FONT-SIZE: 10px”>
<B>Enter</B>
</SPAN>
</A>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>