IT Community - Software Programming, Web Development and Technical Support

popup date selector return dates to different form fields.

This is a discussion on popup date selector return dates to different form fields. within the HTML, CSS and Javascript Coding Techniques forums, part of the Web Development category; Hi all... Can anyone help me how can I have a popup date selector return dates to different form fields. ...


Go Back   IT Community - Software Programming, Web Development and Technical Support > Web Development > HTML, CSS and Javascript Coding Techniques

Reload this Page popup date selector return dates to different form fields.

Register FAQ Members List Calendar Mark Forums Read

Reply
 
LinkBack (1) Thread Tools Display Modes
  1 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 01-07-2008, 04:27 AM
itbarota itbarota is offline
D-Web Architect
  
Join Date: Jun 2007
Posts: 547
itbarota is on a distinguished road
Default popup date selector return dates to different form fields.
Hi all...

Can anyone help me how can I have a popup date selector return dates to different form fields.

Thanks...
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Sponsored Links
  #2 (permalink)  
Old 01-07-2008, 04:29 AM
Pvinothkumar Pvinothkumar is offline
D-Web Analyst
  
Join Date: Sep 2007
Posts: 237
Pvinothkumar is on a distinguished road
Default Re: popup date selector return dates to different form fields.
Hi all...

<script type="text/javascript" langauge="JavaScript">
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
function padout(number) { return (number < 10) ? '0' + number : number; }

var today = new Date();
var day = today.getDate(), month = today.getMonth(), year = y2k(today.getYear()), whichOne = 0;

function restart() {
document.data.elements['date' + whichOne].value = '' + padout(day) + '/' + padout(month - 0 + 1) + '/' + year;
mywindow.close();
}

function newWindow(number) {
whichOne = number;
day = today.getDate(), month = today.getMonth(), year = y2k(today.getYear());
mywindow=open('cal.htm','myname','resizable=no,wid th=350,height=270');
mywindow.location.href = 'cal.htm';
if (mywindow.opener == null) mywindow.opener = self;
}
</script>

<form name="data">
<p><input type="button" value="Show Calendar" onClick="newWindow(1)"> <input type="text" name="date1" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(2)"> <input type="text" name="date2" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(3)"> <input type="text" name="date3" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(4)"> <input type="text" name="date4" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(5)"> <input type="text" name="date5" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(6)"> <input type="text" name="date6" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(7)"> <input type="text" name="date7" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(8)"> <input type="text" name="date8" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(9)"> <input type="text" name="date9" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(10)"> <input type="text" name="date10" value="" size="10">
</form>

Thanks...
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3 (permalink)  
Old 01-08-2008, 09:31 PM
kingmaker kingmaker is offline
D-Web Genius
  
Join Date: Jun 2007
Posts: 882
kingmaker is on a distinguished road
Send a message via Yahoo to kingmaker
Smile Re: popup date selector return dates to different form fields.
<html>
<head>
<script type="text/javascript" langauge="JavaScript"><!--
function Calendar(Month,Year) {
var output = '';

output += '<form name="Cal"><table bgcolor="#c0c0c0" border=0><tr><td align=left width=100%>';
output += '<font color="#0000BB" face="Arial" size=+1>' + names[Month] + ' ' + Year + '<\/font><\/td><td width=50% align=right>';
output += '<select name="Month" onChange="changeMonth();">';

for (month=0; month<12; month++) {
if (month == Month) output += '<option value="' + month + '" selected>' + names[month] + '<\/option>';
else output += '<option value="' + month + '">' + names[month] + '<\/option>';
}

output += '<\/select><select name="Year" onChange="changeYear();">';

for (year=1900; year<2101; year++) {
if (year == Year) output += '<option value="' + year + '" selected>' + year + '<\/option>';
else output += '<option value="' + year + '">' + year + '<\/option>';
}

output += '<\/select><\/td><\/tr><tr><td align=center colspan=2>';

firstDay = new Date(Year,Month,1);
startDay = firstDay.getDay();

if (((Year % 4 == 0) && (Year % 100 != 0)) || (Year % 400 == 0))
days[1] = 29;
else
days[1] = 28;

output += '<table callspacing=0 cellpadding=0 border=1 bordercolordark="#FFFFFF" bordercolorlight="#C0C0C0"><tr>';

for (i=0; i<7; i++)
output += '<td width=50 align=center valign=middle><font size=-1 color="#000000" face="Arial"><b>' + dow[i] +'<\/b><\/font><\/td>';

output += '<\/tr><tr align=center valign=middle>';

var column = 0;
var lastMonth = Month - 1;
if (lastMonth == -1) lastMonth = 11;

for (i=0; i<startDay; i++, column++)
output += '<td width=50 height=30><font size=-1 color="#808080" face="Arial">' + (days[lastMonth]-startDay+i+1) + '<\/font><\/td>';

for (i=1; i<=days[Month]; i++, column++) {
output += '<td width=50 height=30>' + '<a href="javascript:changeDay(' + i + ')"><font size=-1 face="arial" color="#0000FF">' + i + '<\/font><\/a>' +'<\/td>';
if (column == 6) {
output += '<\/tr><tr align=center valign=middle>';
column = -1;
}
}

if (column > 0) {
for (i=1; column<7; i++, column++)
output += '<td width=50 height=30><font size=-1 color="#808080" face="Arial">' + i + '<\/font><\/td>';
}

output += '<\/tr><\/table><\/form><\/td><\/tr><\/table>';

return output;
}

function changeDay(day) {
opener.day = day + '';
opener.restart();
self.close;
}

function changeMonth() {
opener.month = document.Cal.Month.options[document.Cal.Month.selectedIndex].value + '';
location.href = 'cal.htm';
}

function changeYear() {
opener.year = document.Cal.Year.options[document.Cal.Year.selectedIndex].value + '';
location.href = "cal.htm";
}

function makeArray0() {
for (i = 0; i<makeArray0.arguments.length; i++)
this[i] = makeArray0.arguments[i];
}

var names = new makeArray0('January','February','March','April','M ay','June','July','August','September','October',' November','December');
var days = new makeArray0(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var dow = new makeArray0('Sun','Mon','Tue','Wed','Thu','Fri','Sa t');
//--></script>
</head>

<body bgcolor="#C0C0C0" topmargin=2 leftmargin=5>

<p><center>

<script type="text/javascript" language="JavaScript"><!--
document.write(Calendar(opener.month,opener.year)) ;
//--></script>

</center>
</body>
</html>
__________________
The KINGMAKER
Makes Every Thing Possible

Stuffs (My Blog)
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #4 (permalink)  
Old 01-08-2008, 10:19 PM
shaalini shaalini is offline
D-Web Analyst
  
Join Date: Apr 2007
Posts: 342
shaalini is on a distinguished road
Default Re: popup date selector return dates to different form fields.
<HEAD>
var weekend = [0,6];
var weekendColor = "#e0e0e0";
var fontface = "Verdana";
var fontsize = 8; // in "pt" units; used with "font-size" style element

var gNow = new Date();
var ggWinContent;
var ggPosX = -1;
var ggPosY = -1;

Calendar.Months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];

// Non-Leap year Month days..
Calendar.DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// Leap year Month days..
Calendar.lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

function Calendar(p_item, p_month, p_year, p_format) {
if ((p_month == null) && (p_year == null)) return;

if (p_month == null) {
this.gMonthName = null;
this.gMonth = null;
this.gYearly = true;
} else {
this.gMonthName = Calendar.get_month(p_month);
this.gMonth = new Number(p_month);
this.gYearly = false;
}

this.gYear = p_year;
this.gFormat = p_format;
this.gBGColor = "white";
this.gFGColor = "black";
this.gTextColor = "black";
this.gHeaderColor = "black";
this.gReturnItem = p_item;
}

Calendar.get_month = Calendar_get_month;
Calendar.get_daysofmonth = Calendar_get_daysofmonth;
Calendar.calc_month_year = Calendar_calc_month_year;

function Calendar_get_month(monthNo) {
return Calendar.Months[monthNo];
}

function Calendar_get_daysofmonth(monthNo, p_year) {
/*
Check for leap year ..
1.Years evenly divisible by four are normally leap years, except for...
2.Years also evenly divisible by 100 are not leap years, except for...
3.Years also evenly divisible by 400 are leap years.
*/
if ((p_year % 4) == 0) {
if ((p_year % 100) == 0 && (p_year % 400) != 0)
return Calendar.DOMonth[monthNo];

return Calendar.lDOMonth[monthNo];
} else
return Calendar.DOMonth[monthNo];
}

function Calendar_calc_month_year(p_Month, p_Year, incr) {
/*
Will return an 1-D array with 1st element being the calculated month
and second being the calculated year
after applying the month increment/decrement as specified by 'incr' parameter.
'incr' will normally have 1/-1 to navigate thru the months.
*/
var ret_arr = new Array();

if (incr == -1) {
// B A C K W A R D
if (p_Month == 0) {
ret_arr[0] = 11;
ret_arr[1] = parseInt(p_Year) - 1;
}
else {
ret_arr[0] = parseInt(p_Month) - 1;
ret_arr[1] = parseInt(p_Year);
}
} else if (incr == 1) {
// F O R W A R D
if (p_Month == 11) {
ret_arr[0] = 0;
ret_arr[1] = parseInt(p_Year) + 1;
}
else {
ret_arr[0] = parseInt(p_Month) + 1;
ret_arr[1] = parseInt(p_Year);
}
}

return ret_arr;
}

function Calendar_calc_month_year(p_Month, p_Year, incr) {
/*
Will return an 1-D array with 1st element being the calculated month
and second being the calculated year
after applying the month increment/decrement as specified by 'incr' parameter.
'incr' will normally have 1/-1 to navigate thru the months.
*/
var ret_arr = new Array();

if (incr == -1) {
// B A C K W A R D
if (p_Month == 0) {
ret_arr[0] = 11;
ret_arr[1] = parseInt(p_Year) - 1;
}
else {
ret_arr[0] = parseInt(p_Month) - 1;
ret_arr[1] = parseInt(p_Year);
}
} else if (incr == 1) {
// F O R W A R D
if (p_Month == 11) {
ret_arr[0] = 0;
ret_arr[1] = parseInt(p_Year) + 1;
}
else {
ret_arr[0] = parseInt(p_Month) + 1;
ret_arr[1] = parseInt(p_Year);
}
}

return ret_arr;
}

// This is for compatibility with Navigator 3, we have to create and discard one object before the prototype object exists.
new Calendar();

Calendar.prototype.getMonthlyCalendarCode = function() {
var vCode = "";
var vHeader_Code = "";
var vData_Code = "";

// Begin Table Drawing code here..
vCode += ("<div align=center><TABLE BORDER=1 BGCOLOR=\"" + this.gBGColor + "\" style='font-size:" + fontsize + "pt;'>");

vHeader_Code = this.cal_header();
vData_Code = this.cal_data();
vCode += (vHeader_Code + vData_Code);

vCode += "</TABLE></div>";

return vCode;
}

Calendar.prototype.show = function() {
var vCode = "";

// build content into global var ggWinContent
ggWinContent += ("<FONT FACE='" + fontface + "' ><B>");
ggWinContent += (this.gMonthName + " " + this.gYear);
ggWinContent += "</B><BR>";

// Show navigation buttons
var prevMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, -1);
var prevMM = prevMMYYYY[0];
var prevYYYY = prevMMYYYY[1];

var nextMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, 1);
var nextMM = nextMMYYYY[0];
var nextYYYY = nextMMYYYY[1];

ggWinContent += ("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0' style='font-size:" + fontsize + "pt;'><TR><TD ALIGN=center>");
ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go back one year'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)-1) + "', '" + this.gFormat + "'" +
");" +
"\"><<Year<\/A>]</TD><TD ALIGN=center>");
ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go back one month'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', '" + prevMM + "', '" + prevYYYY + "', '" + this.gFormat + "'" +
");" +
"\"><Mon<\/A>]</TD><TD ALIGN=center>");
ggWinContent += " </TD><TD ALIGN=center>";
ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go forward one month'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', '" + nextMM + "', '" + nextYYYY + "', '" + this.gFormat + "'" +
");" +
"\">Mon><\/A>]</TD><TD ALIGN=center>");
ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go forward one year'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)+1) + "', '" + this.gFormat + "'" +
");" +
"\">Year>><\/A>]</TD></TR></TABLE><BR>");

// Get the complete calendar code for the month, and add it to the
// content var
vCode = this.getMonthlyCalendarCode();
ggWinContent += vCode;
}

Calendar.prototype.showY = function() {
var vCode = "";
var i;

ggWinContent += "<FONT FACE='" + fontface + "' ><B>"
ggWinContent += ("Year : " + this.gYear);
ggWinContent += "</B><BR>";

// Show navigation buttons
var prevYYYY = parseInt(this.gYear) - 1;
var nextYYYY = parseInt(this.gYear) + 1;

ggWinContent += ("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0' style='font-size:" + fontsize + "pt;'><TR><TD ALIGN=center>");
ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go back one year'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', null, '" + prevYYYY + "', '" + this.gFormat + "'" +
");" +
"\"><<Year<\/A>]</TD><TD ALIGN=center>");
ggWinContent += " </TD><TD ALIGN=center>";
ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go forward one year'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', null, '" + nextYYYY + "', '" + this.gFormat + "'" +
");" +
"\">Year>><\/A>]</TD></TR></TABLE><BR>");

// Get the complete calendar code for each month.
// start a table and first row in the table
ggWinContent += ("<TABLE WIDTH='100%' BORDER=0 CELLSPACING=0 CELLPADDING=5 style='font-size:" + fontsize + "pt;'><TR>");
var j;
for (i=0; i<12; i++) {
// start the table cell
ggWinContent += "<TD ALIGN='center' VALIGN='top'>";
this.gMonth = i;
this.gMonthName = Calendar.get_month(this.gMonth);
vCode = this.getMonthlyCalendarCode();
ggWinContent += (this.gMonthName + "/" + this.gYear + "<BR>");
ggWinContent += vCode;
ggWinContent += "</TD>";
if (i == 3 || i == 7) {
ggWinContent += "</TR><TR>";
}

}

ggWinContent += "</TR></TABLE></font><BR>";
}

Calendar.prototype.cal_header = function() {
var vCode = "";

vCode = vCode + "<TR>";
vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sun</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Mon</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Tue</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Wed</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Thu</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Fri</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='16%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sat</B></FONT></TD>";
vCode = vCode + "</TR>";

return vCode;
}

Calendar.prototype.cal_data = function() {
var vDate = new Date();
vDate.setDate(1);
vDate.setMonth(this.gMonth);
vDate.setFullYear(this.gYear);

var vFirstDay=vDate.getDay();
var vDay=1;
var vLastDay=Calendar.get_daysofmonth(this.gMonth, this.gYear);
var vOnLastDay=0;
var vCode = "";

/*
Get day for the 1st of the requested month/year..
Place as many blank cells before the 1st day of the month as necessary.
*/
vCode = vCode + "<TR>";
for (i=0; i<vFirstDay; i++) {
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(i) + "><FONT FACE='" + fontface + "'> </FONT></TD>";
}

// Write rest of the 1st week
for (j=vFirstDay; j<7; j++) {
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT FACE='" + fontface + "'>" +
"<A HREF='javascript:void(0);' " +
"onMouseOver=\"window.status='set date to " + this.format_data(vDay) + "'; return true;\" " +
"onMouseOut=\"window.status=' '; return true;\" " +
"onClick=\"document." + this.gReturnItem + ".value='" +
this.format_data(vDay) +
"';ggPosX=-1;ggPosY=-1;nd();nd();\">" +
this.format_day(vDay) +
"</A>" +
"</FONT></TD>";
vDay=vDay + 1;
}
vCode = vCode + "</TR>";

// Write the rest of the weeks
for (k=2; k<7; k++) {
vCode = vCode + "<TR>";

for (j=0; j<7; j++) {
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT FACE='" + fontface + "'>" +
"<A HREF='javascript:void(0);' " +
"onMouseOver=\"window.status='set date to " + this.format_data(vDay) + "'; return true;\" " +
"onMouseOut=\"window.status=' '; return true;\" " +
"onClick=\"document." + this.gReturnItem + ".value='" +
this.format_data(vDay) +
"';window.scroll(0,ggPosY);ggPosX=-1;ggPosY=-1;nd();nd();\">" +
this.format_day(vDay) +
"</A>" +
"</FONT></TD>";
vDay=vDay + 1;

if (vDay > vLastDay) {
vOnLastDay = 1;
break;
}
}

if (j == 6)
vCode = vCode + "</TR>";
if (vOnLastDay == 1)
break;
}

// Fill up the rest of last week with proper blanks, so that we get proper square blocks
for (m=1; m<(7-j); m++) {
if (this.gYearly)
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +
"><FONT FACE='" + fontface + "' COLOR='gray'> </FONT></TD>";
else
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +
"><FONT FACE='" + fontface + "' COLOR='gray'>" + m + "</FONT></TD>";
}

return vCode;
}

Calendar.prototype.format_day = function(vday) {
var vNowDay = gNow.getDate();
var vNowMonth = gNow.getMonth();
var vNowYear = gNow.getFullYear();

if (vday == vNowDay && this.gMonth == vNowMonth && this.gYear == vNowYear)
return ("<FONT COLOR=\"RED\"><B>" + vday + "</B></FONT>");
else
return (vday);
}

Calendar.prototype.write_weekend_string = function(vday) {
var i;

// Return special formatting for the weekend day.
for (i=0; i<weekend.length; i++) {
if (vday == weekend[i])
return (" BGCOLOR=\"" + weekendColor + "\"");
}

return "";
}

Calendar.prototype.format_data = function(p_day) {
var vData;
var vMonth = 1 + this.gMonth;
vMonth = (vMonth.toString().length < 2) ? "0" + vMonth : vMonth;
var vMon = Calendar.get_month(this.gMonth).substr(0,3).toUppe rCase();
var vFMon = Calendar.get_month(this.gMonth).toUpperCase();
var vY4 = new String(this.gYear);
var vY2 = new String(this.gYear.substr(2,2));
var vDD = (p_day.toString().length < 2) ? "0" + p_day : p_day;

switch (this.gFormat) {
case "MM\/DD\/YYYY" :
vData = vMonth + "\/" + vDD + "\/" + vY4;
break;
case "MM\/DD\/YY" :
vData = vMonth + "\/" + vDD + "\/" + vY2;
break;
case "MM-DD-YYYY" :
vData = vMonth + "-" + vDD + "-" + vY4;
break;
case "YYYY-MM-DD" :
vData = vY4 + "-" + vMonth + "-" + vDD;
break;
case "MM-DD-YY" :
vData = vMonth + "-" + vDD + "-" + vY2;
break;
case "DD\/MON\/YYYY" :
vData = vDD + "\/" + vMon + "\/" + vY4;
break;
case "DD\/MON\/YY" :
vData = vDD + "\/" + vMon + "\/" + vY2;
break;
case "DD-MON-YYYY" :
vData = vDD + "-" + vMon + "-" + vY4;
break;
case "DD-MON-YY" :
vData = vDD + "-" + vMon + "-" + vY2;
break;
case "DD\/MONTH\/YYYY" :
vData = vDD + "\/" + vFMon + "\/" + vY4;
break;
case "DD\/MONTH\/YY" :
vData = vDD + "\/" + vFMon + "\/" + vY2;
break;
case "DD-MONTH-YYYY" :
vData = vDD + "-" + vFMon + "-" + vY4;
break;
case "DD-MONTH-YY" :
vData = vDD + "-" + vFMon + "-" + vY2;
break;
case "DD\/MM\/YYYY" :
vData = vDD + "\/" + vMonth + "\/" + vY4;
break;
case "DD\/MM\/YY" :
vData = vDD + "\/" + vMonth + "\/" + vY2;
break;
case "DD-MM-YYYY" :
vData = vDD + "-" + vMonth + "-" + vY4;
break;
case "DD-MM-YY" :
vData = vDD + "-" + vMonth + "-" + vY2;
break;
default :
vData = vMonth + "\/" + vDD + "\/" + vY4;
}

return vData;
}

function Build(p_item, p_month, p_year, p_format) {
gCal = new Calendar(p_item, p_month, p_year, p_format);

// Customize your Calendar here..
gCal.gBGColor="white";
gCal.gLinkColor="black";
gCal.gTextColor="black";
gCal.gHeaderColor="darkgreen";

// initialize the content string
ggWinContent = "";

// Choose appropriate show function
if (gCal.gYearly) {
// and, since the yearly calendar is so large, override the positioning and fontsize
// warning: in IE6, it appears that "select" fields on the form will still show
// through the "over" div; Note: you can set these variables as part of the onClick
// javascript code before you call the show_yearly_calendar function
if (ggPosX == -1) ggPosX = 10;
if (ggPosY == -1) ggPosY = 10;
if (fontsize == 8) fontsize = 6;
// generate the calendar
gCal.showY();
}
else {
gCal.show();
}

// if this is the first calendar popup, use autopositioning with an offset
if (ggPosX == -1 && ggPosY == -1) {
overlib(ggWinContent, AUTOSTATUSCAP, STICKY, CLOSECLICK, CSSSTYLE,
TEXTSIZEUNIT, "pt", TEXTSIZE, 8, CAPTIONSIZEUNIT, "pt", CAPTIONSIZE, 8, CLOSESIZEUNIT, "pt", CLOSESIZE, 8,
CAPTION, "Select a date", OFFSETX, 20, OFFSETY, -20);
// save where the 'over' div ended up; we want to stay in the same place if the user
// clicks on one of the year or month navigation links
if ( (ns4) || (ie4) ) {
ggPosX = parseInt(over.left);
ggPosY = parseInt(over.top);
} else if (ns6) {
ggPosX = parseInt(over.style.left);
ggPosY = parseInt(over.style.top);
}
}
else {
// we have a saved X & Y position, so use those with the FIXX and FIXY options
overlib(ggWinContent, AUTOSTATUSCAP, STICKY, CLOSECLICK, CSSSTYLE,
TEXTSIZEUNIT, "pt", TEXTSIZE, 8, CAPTIONSIZEUNIT, "pt", CAPTIONSIZE, 8, CLOSESIZEUNIT, "pt", CLOSESIZE, 8,
CAPTION, "Select a date", FIXX, ggPosX, FIXY, ggPosY);
}
window.scroll(ggPosX, ggPosY);
}

function show_calendar() {
/*
p_month : 0-11 for Jan-Dec; 12 for All Months.
p_year : 4-digit year
p_format: Date format (mm/dd/yyyy, dd/mm/yy, ...)
p_item : Return Item.
*/

p_item = arguments[0];
if (arguments[1] == null)
p_month = new String(gNow.getMonth());
else
p_month = arguments[1];
if (arguments[2] == "" || arguments[2] == null)
p_year = new String(gNow.getFullYear().toString());
else
p_year = arguments[2];
if (arguments[3] == null)
p_format = "YYYY-MM-DD";
else
p_format = arguments[3];

Build(p_item, p_month, p_year, p_format);
}
/*
Yearly Calendar Code Starts here
*/
function show_yearly_calendar() {
// Load the defaults..
//if (p_year == null || p_year == "")
// p_year = new String(gNow.getFullYear().toString());
//if (p_format == null || p_format == "")
// p_format = "YYYY-MM-DD";

p_item = arguments[0];
if (arguments[1] == "" || arguments[1] == null)
p_year = new String(gNow.getFullYear().toString());
else
p_year = arguments[1];
if (arguments[2] == null)
p_format = "YYYY-MM-DD";
else
p_format = arguments[2];

Build(p_item, null, p_year, p_format);
}
</script>
<script language="JavaScript" src="overlib_mini.js"></script>
</HEAD>


<BODY>


<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<p>Pop-up calendar sample page:</p>
<form name="sample" method="post" action="popupcalsample.html">
<p>Beginning date: <input type="text" name="T1" size="20">
<!-- ggPosX and ggPosY not set, so popup will autolocate to the right of the graphic -->
<a href="javascript:show_calendar('sample.T1');" onMouseOver="window.status='Date Picker'; overlib('Click here to choose a date from a one month pop-up calendar.'); return true;" onMouseOut="window.status=''; nd(); return true;"><img src="http://nordenterprises.com/h-o-a-home/images/show-calendar.gif" width=24 height=22 border=0></a>
</p>
<p>Ending date: <input type="text" name="T2" size="20">
<!-- ggPosX and ggPosY are set, so popup goes where you tell it -->
<a href="javascript:ggPosX=5;ggPosY=200;show_yearly_c alendar('sample.T2');" onMouseOver="window.status='Date Picker'; overlib('Click here to choose a date from a full year pop-up calendar.'); return true;" onMouseOut="window.status=''; nd(); return true;"><img src="http://nordenterprises.com/h-o-a-home/images/show-calendar.gif" width=24 height=22 border=0></a>
</p>
<p><input type="submit" value="Submit" name="B1"><input type="reset"
value="Reset" name="B2"></p>
</form>
__________________
Shaalini.S
Be the Best of Whatever you are...
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

« Previous Thread | Next Thread »

Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

LinkBacks (?)
LinkBack to this Thread: http://www.discussweb.com/html-css-javascript-coding-techniques/4929-popup-date-selector-return-dates-different-form-fields.html
Posted By For Type Date
DiscussWeb IT Community - Technical Support and Technology Discussions This thread Refback 01-08-2008 10:20 PM

Similar Threads
Thread Thread Starter Forum Replies Last Post
How can I disable form fields? GDevakii HTML, CSS and Javascript Coding Techniques 7 08-04-2008 07:04 PM
Date/time stamp a form field as the form is submitted itbarota HTML, CSS and Javascript Coding Techniques 1 02-06-2008 10:16 PM
Date/Time stamp a form field as the form is submitted itbarota HTML, CSS and Javascript Coding Techniques 2 01-17-2008 08:47 PM
How can I return two values to a form? S.Vinothkumar PHP Programming 5 10-16-2007 07:29 AM
Appearance of Form Fields. itbarota HTML, CSS and Javascript Coding Techniques 13 10-05-2007 08:59 AM


All times are GMT -7. The time now is 01:22 PM.

Contact Us - IT Community - Archive - Top

Copyright ©2004 - 2007, DiscussWeb. All Rights Reserved.

SEO by vBSEO 3.0.0