PDA

View Full Version : Netscape Javascript Problem - DHTML

JohnTirone
12-27-2002, 03:50 PM
Again ... Netscape is aggrivating me. Can someone please help with the following code ...

The purpose of the code is to display a calendar so that the user uses the pulldowns to select a date for a corresponding input box.

It works fine in IE, but Netscape reset's the input box after the following line in show_calendar: div_id.innerHTML = str_buffer;

The code is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
Untitled
</title><link REL="stylesheet" TYPE="text/css" HREF="../../css/FR_CalendarJT.css">
<script language="JavaScript1.2">var giMonthLength = 1; // month length (0,1)
var giMinYear = parseInt(1900); // Minimum year (1 is the lowest possible value)
var giMaxYear = parseInt(new Date().getFullYear()); // Maximum year

var gaMonthNames = new Array(
new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'),
new Array('January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December')
);

var gaDayNames = new Array(
new Array('S', 'M', 'T', 'W', 'T', 'F', 'S'),
new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'),
new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday')
);

var gaMonthDays = new Array(
/* Jan */ 31, /* Feb */ 29, /* Mar */ 31, /* Apr */ 30,
/* May */ 31, /* Jun */ 30, /* Jul */ 31, /* Aug */ 31,
/* Sep */ 30, /* Oct */ 31, /* Nov */ 30, /* Dec */ 31 )

function show_calendar(str_target, str_base_url, str_div_id, str_cal_func) {

var str_datetime;
str_datetime = (document.getElementById(str_target)).value;

var arr_months = gaMonthNames[0];
var week_days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var n_weekstart = 0; // day week starts from (normally 0 or 1)


//This is the date passed in
var dt_datetime;
var dt_prev_month;
var dt_next_month;
var dt_firstday;
var dt_lastday;
var str_buffer;
var dt_current_day;

dt_datetime = (str_datetime == null || str_datetime =="") ? new Date() : str2dt(str_datetime);
fnCheckLeapYear(dt_datetime.getFullYear()); // Before proceeding, update the #days in February if leap year


dt_prev_month = new Date(dt_datetime);
dt_prev_month.setMonth(dt_datetime.getMonth()-1);
dt_next_month = new Date(dt_datetime);
dt_next_month.setMonth(dt_datetime.getMonth()+1);
//set the first day to display on the calendar even if in PRIOR month
dt_firstday = new Date(dt_datetime);
dt_firstday.setDate(1);

//if the first day of the calendar is a SUNDAY ... print prior week
if ((1-(7+dt_firstday.getDay()-n_weekstart)%7) == 1)
dt_firstday.setDate(-7);
else
dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);


//set the last day to display on the calendar even if in NEXT month
dt_lastday = new Date(dt_next_month);
dt_lastday.setDate(0);


str_buffer = new String ("<TABLE class=BodyTable border=0 cellpadding=0 cellspacing=0><tr><td>"+
"<table cellpadding=2 cellspacing=0 border=0 class=WholeCalendar>"+
"<tr><td align=right class=CalendarTitle>"+
fnBuildMonthSelect(dt_datetime.getMonth(),dt_datetime.getFullYear(),str_target, str_base_url, str_div_id, str_cal_func) +
"&nbsp;" +
fnBuildYearSelect(dt_datetime.getMonth(),dt_datetime.getFullYear(),str_target, str_base_url, str_div_id, str_cal_func) +
"</td></tr>"+
"<tr><td class=WholeCalendar>"+
"<table class=WholeCalendar cellpadding=0 cellspacing=0>"
);

dt_current_day = new Date(dt_firstday);
// print weekdays titles

str_buffer += "<tr>";
for (var n=0; n<7; n++)
str_buffer += " <td class=CalendarDayTitle>"+week_days[(n_weekstart+n)%7]+"</td>";
// print calendar table
str_buffer += "</tr>";

row_count=0;
while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
dt_current_day.getMonth() == dt_firstday.getMonth() || row_count<6) {
// print row heder
row_count++;
str_buffer += "<tr>";
for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
if (dt_current_day.getDate() == dt_datetime.getDate() &&
dt_current_day.getMonth() == dt_datetime.getMonth())
// print current date
str_buffer += " <td class=CalendarDaySelected>";
else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
// weekend days
str_buffer += " <td class=CalendarDay>";
else
// print working days of current month
str_buffer += " <td class=CalendarOffDay>";

str_buffer += dt_current_day.getDate()+"</td>";
dt_current_day.setDate(dt_current_day.getDate()+1);
}
// print row footer
str_buffer += "</tr>";
}

// print calendar footer
str_buffer +=
"</table>\n" +
"</td>\n</tr>\n</table>\n" +
"</td></tr><tr><td class=CalendarDayTitle align=center>\n"+
"<a href=\"javascript:fnCloseCalendar('" + str_target + "', '" + str_base_url + "','" + str_div_id + "','" + str_cal_func + "');\">"+
"<IMG alt=\"ok\" src=\""+str_base_url+"image/calendar_ok_button.gif\"></a>"+
"</td></tr></TABLE>\n";



div_id = document.getElementById(str_div_id);
div_id.innerHTML = str_buffer;

}

// datetime parsing and formatting routimes. modify them if you wish other datetime format
function str2dt (str_datetime) {
return (new Date (str_datetime));
}
function dt2dtstr (dt_datetime) {
return (new String (ar[dt_datetime.getMonth()] + " " + dt_datetime.getDate()+ ", " + dt_datetime.getFullYear()));
}
function dt2tmstr (dt_datetime) {
return (new String (""));
}

function fnCloseCalendar(str_target, str_base_url,str_div_id,str_cal_func) {
var str_buffer = "<a href=\"javascript:show_calendar('"+str_target+"', '"+str_base_url+"','"+str_div_id+"','"+str_cal_func+"');\"><IMG alt=\"Calendar\" src=\""+str_base_url+"image/calendar_icon2.gif\"></a>";

div_id.innerHTML = str_buffer;
}

function fnMonthSelectOnChange(nMonthIndex, nYear, str_target, str_base_url, str_div_id, str_cal_func)
{
fnCheckLeapYear(nYear);
var nDay = gaMonthDays[nMonthIndex];

var dCalendarDay = gaMonthNames[0][nMonthIndex] + " " + nDay + ", " + nYear;

var dDateField = document.getElementById(str_target);

dDateField.value = dCalendarDay;

show_calendar(str_target, str_base_url,str_div_id,str_cal_func);
}

function fnYearSelectOnChange(nMonthIndex, nYear, str_target, str_base_url, str_div_id, str_cal_func)
{

fnCheckLeapYear(nYear);
var nDay = gaMonthDays[nMonthIndex];

var dCalendarDay = gaMonthNames[0][nMonthIndex] + " " + nDay + ", " + nYear;

var dDateField = document.getElementById(str_target);

dDateField.value = dCalendarDay;

show_calendar(str_target, str_base_url,str_div_id,str_cal_func);
}


function fnBuildMonthSelect(nMonthIndex, nYear, str_target, str_base_url, str_div_id, str_cal_func)
{
var newMonthSelect;

newMonthSelect = "\n<SELECT class=CalendarDateControls onchange=\"fnMonthSelectOnChange(this.value, " + nYear + ", '" + str_target + "', '" + str_base_url + "', '" + str_div_id + "', '" + str_cal_func + "');\">";

var noMonths=12;

for (i=0 ; i < noMonths; i++ )
{
newMonthSelect = newMonthSelect + "<OPTION value=\"" + i + "\"" ;

if (i == nMonthIndex)
{
newMonthSelect = newMonthSelect + " SELECTED";
}
newMonthSelect = newMonthSelect + ">" + gaMonthNames[giMonthLength][i] + "";
}

newMonthSelect = newMonthSelect + "</SELECT>";
return newMonthSelect;

}



function fnBuildYearSelect(nMonthIndex, nNewYearValue, str_target, str_base_url, str_div_id, str_cal_func)
{


var newYearSelect;
// newYearSelect = "<SELECT onchange='fnYearSelectOnChange();'>";

var sMonth = gaMonthNames[0][nMonthIndex];

newYearSelect = "\n<SELECT class=CalendarDateControls onchange=\"fnYearSelectOnChange(" + nMonthIndex +",this.value , '" + str_target + "', '" + str_base_url + "', '" + str_div_id + "', '" + str_cal_func + "');\">";



for (i=1900; i <= giMaxYear; i++)
{
newYearSelect = newYearSelect + "<OPTION value=\"" + i + "\"";

if (i == nNewYearValue)
{
newYearSelect = newYearSelect + " SELECTED";
}
newYearSelect = newYearSelect + ">" + i + "";
}
newYearSelect = newYearSelect + "</SELECT></div>";

return newYearSelect;

}


function fnCheckLeapYear(iYear){ gaMonthDays[1] = (((!(iYear % 4)) && (iYear % 100) ) || !(iYear % 400)) ? 29 : 28 }
</script>
</head>
<body>
<form>
<input READONLY maxLength="18" type="text" id="NICalendar2" NAME="end_date" ><div id="div_last_day" style="display:inline;"><a href="javascript:show_calendar('NICalendar2', '../../','div_last_day','last_day');"><IMG alt="Calendar" src="../../image/calendar_icon2.gif"></a></div>
</form>
</body>
</html>
JohnTirone
12-27-2002, 05:05 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
Untitled
</title><link REL="stylesheet" TYPE="text/css" HREF="../../css/FR_CalendarJT.css">
<script language="JavaScript1.2">var giMonthLength = 1; // month length (0,1)
var giMinYear = parseInt(1900); // Minimum year (1 is the lowest possible value)
var giMaxYear = parseInt(new Date().getFullYear()); // Maximum year

var gaMonthNames = new Array(
new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'),
new Array('January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December')
);

var gaDayNames = new Array(
new Array('S', 'M', 'T', 'W', 'T', 'F', 'S'),
new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'),
new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday')
);

var gaMonthDays = new Array(
/* Jan */ 31, /* Feb */ 29, /* Mar */ 31, /* Apr */ 30,
/* May */ 31, /* Jun */ 30, /* Jul */ 31, /* Aug */ 31,
/* Sep */ 30, /* Oct */ 31, /* Nov */ 30, /* Dec */ 31 )

function fnDefaultDate(str_cal_func) {

var dt_prev_month;
var dateStr;

dt_prev_month = new Date();
dt_prev_month.setMonth(dt_prev_month.getMonth()-1);

fnCheckLeapYear(dt_prev_month.getFullYear());

if (str_cal_func == "last_day") {
dateStr = gaMonthNames[0][dt_prev_month.getMonth()] + " " + gaMonthDays[dt_prev_month.getMonth()] + ", " + dt_prev_month.getFullYear();
}
else // we know it's first day
{
dateStr = gaMonthNames[0][dt_prev_month.getMonth()] + " 1, " + dt_prev_month.getFullYear();
}
return str2dt(dateStr);
}

function show_calendar(str_target, str_base_url, str_div_id, str_cal_func) {

var str_datetime;
str_datetime = (document.getElementById(str_target)).value;


var arr_months = gaMonthNames[0];
var week_days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var n_weekstart = 0; // day week starts from (normally 0 or 1)

//This is the date passed in
var dt_datetime;
var dt_prev_month;
var dt_next_month;
var dt_firstday;
var dt_lastday;
var str_buffer;
var dt_current_day;

dt_datetime = (str_datetime == null || str_datetime =="") ? fnDefaultDate(str_cal_func) : str2dt(str_datetime);
fnCheckLeapYear(dt_datetime.getFullYear()); // Before proceeding, update the #days in February if leap year


dt_prev_month = new Date(dt_datetime);
dt_prev_month.setMonth(dt_datetime.getMonth()-1);
dt_next_month = new Date(dt_datetime);
dt_next_month.setMonth(dt_datetime.getMonth()+1);
//set the first day to display on the calendar even if in PRIOR month
dt_firstday = new Date(dt_datetime);
dt_firstday.setDate(1);

//if the first day of the calendar is a SUNDAY ... print prior week
if ((1-(7+dt_firstday.getDay()-n_weekstart)%7) == 1)
dt_firstday.setDate(-7);
else
dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);


//set the last day to display on the calendar even if in NEXT month
dt_lastday = new Date(dt_next_month);
dt_lastday.setDate(0);


str_buffer = new String ("<TABLE class=BodyTable border=0 cellpadding=0 cellspacing=0><tr><td>"+
"<table cellpadding=2 cellspacing=0 border=0 class=WholeCalendar>"+
"<tr><td align=right class=CalendarTitle>"+
fnBuildMonthSelect(dt_datetime.getMonth(),dt_datetime.getFullYear(),str_target, str_base_url, str_div_id, str_cal_func) +
"&nbsp;" +
fnBuildYearSelect(dt_datetime.getMonth(),dt_datetime.getFullYear(),str_target, str_base_url, str_div_id, str_cal_func) +
"</td></tr>"+
"<tr><td class=WholeCalendar>"+
"<table class=WholeCalendar cellpadding=0 cellspacing=0>"
);

dt_current_day = new Date(dt_firstday);
// print weekdays titles

str_buffer += "<tr>";
for (var n=0; n<7; n++)
str_buffer += " <td class=CalendarDayTitle>"+week_days[(n_weekstart+n)%7]+"</td>";
// print calendar table
str_buffer += "</tr>";

row_count=0;
while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
dt_current_day.getMonth() == dt_firstday.getMonth() || row_count<6) {
// print row heder
row_count++;
str_buffer += "<tr>";
for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
if (dt_current_day.getDate() == dt_datetime.getDate() &&
dt_current_day.getMonth() == dt_datetime.getMonth())
// print current date
str_buffer += " <td class=CalendarDaySelected>";
else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
// weekend days
str_buffer += " <td class=CalendarDay>";
else
// print working days of current month
str_buffer += " <td class=CalendarOffDay>";

str_buffer += dt_current_day.getDate()+"</td>";
dt_current_day.setDate(dt_current_day.getDate()+1);
}
// print row footer
str_buffer += "</tr>";
}

// print calendar footer
str_buffer +=
"</table>\n" +
"</td>\n</tr>\n</table>\n" +
"</td></tr><tr><td class=CalendarDayTitle align=center>\n"+
"<a href=\"javascript:fnCloseCalendar('" + str_target + "', '" + str_base_url + "','" + str_div_id + "','" + str_cal_func + "');\">"+
"<IMG alt=\"ok\" src=\""+str_base_url+"image/calendar_ok_button.gif\"></a>"+
"</td></tr></TABLE>\n";



div_id = document.getElementById(str_div_id);
div_id.style.display="";
div_id.innerHTML = str_buffer;

}

// datetime parsing and formatting routimes. modify them if you wish other datetime format
function str2dt (str_datetime) {
return (new Date (str_datetime));
}
function dt2dtstr (dt_datetime) {
return (new String (ar[dt_datetime.getMonth()] + " " + dt_datetime.getDate()+ ", " + dt_datetime.getFullYear()));
}
function dt2tmstr (dt_datetime) {
return (new String (""));
}

function fnCloseCalendar(str_target, str_base_url,str_div_id,str_cal_func) {
var str_buffer = "";
div_id = document.getElementById(str_div_id);
div_id.style.display="none";
}

function fnMonthSelectOnChange(nMonthIndex, nYear, str_target, str_base_url, str_div_id, str_cal_func)
{
fnCheckLeapYear(nYear);
var nDay;

if (str_cal_func == "last_day")
nDay = gaMonthDays[nMonthIndex];
else
nDay = 1;

var dCalendarDay = gaMonthNames[0][nMonthIndex] + " " + nDay + ", " + nYear;

var dDateField = document.getElementById(str_target);

dDateField.value = dCalendarDay;

show_calendar(str_target, str_base_url,str_div_id,str_cal_func);
}

function fnYearSelectOnChange(nMonthIndex, nYear, str_target, str_base_url, str_div_id, str_cal_func)
{

fnCheckLeapYear(nYear);
var nDay;

if (str_cal_func == "last_day")
nDay = gaMonthDays[nMonthIndex];
else
nDay = 1;

var dCalendarDay = gaMonthNames[0][nMonthIndex] + " " + nDay + ", " + nYear;

var dDateField = document.getElementById(str_target);

dDateField.value = dCalendarDay;

show_calendar(str_target, str_base_url,str_div_id,str_cal_func);
}


function fnBuildMonthSelect(nMonthIndex, nYear, str_target, str_base_url, str_div_id, str_cal_func)
{
var newMonthSelect;

newMonthSelect = "\n<SELECT class=CalendarDateControls onchange=\"fnMonthSelectOnChange(this.value, " + nYear + ", '" + str_target + "', '" + str_base_url + "', '" + str_div_id + "', '" + str_cal_func + "');\">";

var noMonths=12;

for (i=0 ; i < noMonths; i++ )
{
newMonthSelect = newMonthSelect + "<OPTION value=\"" + i + "\"" ;

if (i == nMonthIndex)
{
newMonthSelect = newMonthSelect + " SELECTED";
}
newMonthSelect = newMonthSelect + ">" + gaMonthNames[giMonthLength][i] + "";
}

newMonthSelect = newMonthSelect + "</SELECT>";
return newMonthSelect;

}





function fnBuildYearSelect(nMonthIndex, nNewYearValue, str_target, str_base_url, str_div_id, str_cal_func)
{


var newYearSelect;
// newYearSelect = "<SELECT onchange='fnYearSelectOnChange();'>";

var sMonth = gaMonthNames[0][nMonthIndex];

newYearSelect = "\n<SELECT class=CalendarDateControls onchange=\"fnYearSelectOnChange(" + nMonthIndex +",this.value , '" + str_target + "', '" + str_base_url + "', '" + str_div_id + "', '" + str_cal_func + "');\">";



for (i=1900; i <= giMaxYear; i++)
{
newYearSelect = newYearSelect + "<OPTION value=\"" + i + "\"";

if (i == nNewYearValue)
{
newYearSelect = newYearSelect + " SELECTED";
}
newYearSelect = newYearSelect + ">" + i + "";
}
newYearSelect = newYearSelect + "</SELECT></div>";

return newYearSelect;

}


function fnCheckLeapYear(iYear){ gaMonthDays[1] = (((!(iYear % 4)) && (iYear % 100) ) || !(iYear % 400)) ? 29 : 28 }
</script>
</head>
<body>
<form>
<input READONLY maxLength="18" type="text" id="NICalendar2" NAME="end_date" ><a href="javascript:show_calendar('NICalendar2', '../../','div_last_day','last_day');"><IMG alt="Calendar" src="../../image/calendar_icon2.gif"></a>
<BR>
<input READONLY maxLength="18" type="text" id="NICalendar3" NAME="begin_date" ><a href="javascript:show_calendar('NICalendar3', '../../','div_first_day','first_day');"><IMG alt="Calendar" src="../../image/calendar_icon2.gif"></a>

</form>
<div id="div_last_day" style="display:block;"></div>
<div id="div_first_day" style="display:block;"></div>
</body>
</html>