I'm using a neat
JS calendar I found. I now need to have my form automatically submit everytime the user selects a date. How would I accomplish this? Below is the both the
JS and the HTML:
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DHTML Calendar
Author : Darren Neimke
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// -------------------------------------------
// Helper classes etc.
// -------------------------------------------
// Visibility enum
var Visibility = new Array()
Visibility.On = true ;
Visibility.Off = false ;
// Browser class
function Browser()
{
if ( parseInt( navigator.appVersion.charAt(0) ) >= 4 )
// Browser check.
{
this.isDOM = document.getElementById ? true : false ;
this.isNav6 = (navigator.appName == "Netscape") ? true : false ;
this.isNav4 = (navigator.appName == "Netscape" && !(this.isDOM)) ? true : false ;
this.isIE4 = (navigator.appName.indexOf("Microsoft") != -1) ? true : false ;
}
}
var browser = new Browser();
// -------------------------------------------
// Global variables, functions etc.
// -------------------------------------------
// The following variables are global,
// don't edit them
// reference to instance
var gCalendar ;
// constructor
function gfnCalInitialize()
{
new suycCalendar(new Date()) ;
}
// Instantiate the calendar
window.onload = function()
{
gfnCalInitialize() ;
}
if(browser.isDOM)
{
document.writeln('<style>');
document.writeln('.calWeekday{font: \'normal 8pt Arial\';}') ;
document.writeln('.calNonCurrentMonth{font: \'normal 8pt Arial\'; color: \'LightGrey\' ;}') ;
document.writeln('A {color: Blue; text-decoration: None; font: \'normal 8pt Arial\';}') ;
document.writeln('A:hover {color: Gray; text-decoration: Underline; font: \'normal 8pt Arial\';}') ;
document.writeln('td.cal{font-family : Arial;font-size : 8pt;background-color : #ffffff;}');
document.writeln('#calContainer {');
document.writeln('position : absolute;');
if(browser.isIE4)
{
document.writeln('width : 160px;');
document.writeln('clip:rect(0px 160px 141px 0px);');
document.writeln('height : 141px;');
}
else
{
document.writeln('width : 162px;');
document.writeln('clip:rect(0px 162px 148px 0px);');
document.writeln('height : 148px;');
}
document.writeln('visibility : hidden;');
document.writeln('background-color : LightGrey');
document.writeln('}');
document.writeln('</style>')
document.writeln('<DIV Id="calContainer"></DIV>') ;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
function suycCalendar()
{
gCalendar = this ;
this.days = new Array('Sunday','Monday','Tuesday','Wednesday','Thu rsday','Friday','Saturday') ;
this.months = new Array('January','February','March','April','May',' June','July','August','September','October','Novem ber','December') ;
this.monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31) ;
// Populate the current Day|Month|Year properties
var objDate = new Date() ;
this.currentDay = objDate.getDate() ;
this.currentMonth = objDate.getMonth() ;
var curYear = objDate.getYear() ;
this.currentYear = (curYear < 1000) ? curYear + 1900 : curYear ;
this.year = this.currentYear ;
this.month = this.currentMonth ;
this.isVisible = false ;
// Pre-build the top shell
this.calTopOuter = '<center>'
+ '<form name="frmCalendar">'
+ '<table bgcolor="#000000" cellpadding="1" cellspacing="0" border="0" width="160px">'
+ '<tr>'
+ '<td>'
+ '<table cellpadding="0" cellspacing="0" border="0">' ;
// Pre-build the selector bar
this.calSelectorBarTop = '<tr bgcolor="#000000">'
+ '<th style="color: \'#000000\'; font: \'bold 10pt Arial\' ;" align="left">'
+ '<input type="button" name="previousMonth" value=" < " onClick="gCalendar.MonthClick(-1) ;">'
+ '</th>'
+ '<th colspan="5" style="color: \'#000000\'; font: \'bold 10pt Arial\' ;">'
+ '<select name="calSelMonth" onChange="gCalendar.MonthOnChange();">' ;
this.calSelectorBarBottom = '</th><th style="color: \'#000000\'; font: \'bold 10pt Arial\' ;" align="right">'
+ '<input type="button" name="nextMonth" value=" > " onClick="gCalendar.MonthClick(1) ;">'
+ '</th>'
+ '</tr>' ;
// Pre-build the day names bar
this.calDayNameBar = '<tr bgcolor="LightGrey">' ;
for (var i=0; i < this.days.length; i++)
{
this.calDayNameBar += '<th class="calHeading" style="color: \'#000000\'; font: \'bold 10pt Arial\' ;" width="30px">' + this.days[i].substr(0,2) + '</th>' ;
}
this.calDayNameBar += '</tr>' ;
// Pre-build the bottom shell
this.calBottomOuter = '<tr bgcolor="LightGrey">'
+ '<th colspan="7" style="color: \'#000000\'; font: \'bold 10pt Arial\' ;">'
+ '<a href="javascript
: void(0) ;" onClick="gCalendar.MoveToCurrent() ;" class="calFooter">Today</a>'
+ '</th></tr></table></td></tr></table></form></center>' ;
// Create the canvass that we will be displaying the calendar on
this.initCanvass() ;
}
/*********************************************
Public methods
**********************************************/
/*
Show is called when a user requests a calendar. The show method
is passed 4 arguments; the event, the formname, the fieldname
and and optional dir value of 'right' or left'. The default for the
fourth argument is 'right'
*/
suycCalendar.prototype.Show = function(event, formname, fieldname, dir)
{
if(this.isVisible == true)
{
this.setVisibility(Visibility.Off) ;
return ;
}
this.setVisibility(Visibility.Off) ;
if (browser.isIE4)
{
var event = window.event ;
//Set the x pos of the calendar object
if (dir == 'left')
{
this.x = event.clientX - 180 ;
}
else
{
this.x = event.clientX + 22 ;
}
//Set the y pos of the calendar object
this.y = event.clientY - 10 ;
}
else if(browser.isNav6)
{
if (dir == 'left')
{
this.x = event.pageX - 183 ;
}
else
{
this.x = event.pageX + 10 ;
}
this.y = event.pageY - 5 ;
}
else if (browser.isNav4)
{
if (dir == 'left')
{
this.x = event.x - 162 ;
}
else
{
this.x = event.x + 10 ;
}
this.y = event.y - 5 ;
}
this.target = document.forms[formname].elements[fieldname] ;
this.positionCanvass() ;
this.setVisibility(Visibility.On) ;
this.writeString(this.buildString()) ;
}
/*
Invoked by the user explicitly closing the calendar
*/
suycCalendar.prototype.Hide = function()
{
this.x = 0 ;
this.y = 0 ;
this.setVisibility(Visibility.Off) ;
}
/*
Invoked by the user explicitly clicking a
day on the calendar face
*/
suycCalendar.prototype.DayClick = function(day)
{
this.target.value = this.formatDate(day) ;
this.setVisibility(Visibility.Off) ;
}
/*
Invoked by the user explicitly toggling the
Month by -1 or +1
*/
suycCalendar.prototype.MonthClick = function(n)
{
if((this.month + n) < 0)
{
this.month = 11 ;
-- this.year ;
}
else if((this.month + n) >= 12)
{
this.month = 0 ;
++ this.year ;
}
else
{
this.month = this.month + n ;
}
this.writeString(this.buildString()) ;
}
/*
Invoked by the user explicitly changing the
text in the year selector
*/
suycCalendar.prototype.YearOnBlur = function()
{
var tmp = browser.isNav6?this.canvass.ownerDocument.forms[0].calTxtYear:this.canvass.document.forms[0].calTxtYear;
// TO DO: validate tmp.value
this.year = tmp.value ;
this.writeString(this.buildString()) ;
}
/*
Invoked by the user explicitly changing the
month dd selector
*/
suycCalendar.prototype.MonthOnChange = function()
{
this.month = browser.isNav6?this.canvass.ownerDocument.forms[0].calSelMonth.selectedIndex:this.canvass.document.f orms[0].calSelMonth.selectedIndex;
this.writeString(this.buildString());
}
// Moves the Calendar to the current Month/Year
suycCalendar.prototype.MoveToCurrent = function()
{
this.year = this.currentYear ;
this.month = this.currentMonth ;
this.writeString(this.buildString()) ;
}
/* **********************************************
Private methods
**********************************************/
// Set up the canvass
// Called on initialization of the Class to create the acutal DIV|LAYER Object
suycCalendar.prototype.initCanvass = function()
{
if (browser.isNav4)
{
this.canvass = new Layer(200) ;
}
else if (browser.isIE4 || browser.isDOM)
{
this.canvass = browser.isDOM ? document.getElementById('calContainer') : document.all.calContainer ;
}
this.setVisibility(Visibility.Off) ;
}
// overrideable - optional to pass in a Visibility enum
// signatureA = setVisibility() // defaults to opposite of current values
// signatureB = setVisibility(Visibility.[On|Off])
suycCalendar.prototype.setVisibility = function()
{
if(browser.isNav4)
{
if (this.setVisibility.arguments.length == 0)
{
this.canvass.visibility = this.isVisible ? 'show' : 'hide' ;
this.isVisible = !(this.isVisible)
}
else
{
this.canvass.visibility = this.setVisibility.arguments[0] ? 'show' : 'hide' ;
this.isVisible = this.setVisibility.arguments[0] ;
}
}
else if (browser.isIE4 || browser.isDOM)
{
if (this.setVisibility.arguments.length == 0)
{
this.canvass.style.visibility = this.isVisible ? 'visible' : 'hidden' ;
this.isVisible = !(this.isVisible)
}
else
{
this.canvass.style.visibility = this.setVisibility.arguments[0] ? 'visible' : 'hidden' ;
this.isVisible = this.setVisibility.arguments[0] ;
}
}
} // setVisibility
// apply Positioning
suycCalendar.prototype.positionCanvass = function()
{
if ( browser.isNav4 )
{
this.canvass.left = this.x ;
this.canvass.top = this.y ;
}
else if ( browser.isIE4 || browser.isDOM )
{
this.canvass.style.left = this.x ;
this.canvass.style.top = this.y ;
}
} // positionCanvass
// builds/accumulates the string
suycCalendar.prototype.buildString = function()
{
// Get the first and last Day numbers of the month being fetched
var objDate = new Date( this.year, this.month, 1 ) ;
var firstDayOfMonth = objDate.getDay() ;
var lastDayOfMonth = this.daysInMonth() ;
objDate = null ;
var i = 0 ;
var numCols = 0 ;
var numRows = 0 ;
var currentDay = 0 ;
var endPadding = ' ' ;
// Work out what month last month was
var pM = 0 ;
var pY = 0 ;
if((this.month - 1) < 0)
{
pM = 11 ;
pY = this.year - 1 ;
}
else
{
pM = this.month-1 ;
pY = this.year ;
}
var daysInPreviousMonth = this.daysInMonth(pY, pM) ;
var startOfPreviousMonth = daysInPreviousMonth - (firstDayOfMonth-1)
// Start building the calendar body
var tmpString = this.calTopOuter
+ this.calSelectorBarTop ;
for (var i=0; i < this.months.length; i++)
{
tmpString += '<option value="' + i + '"' ;
if (i == this.month) tmpString += ' selected' ;
tmpString += '>' + this.months[i].substr(0,3) + '</option>' ;
}
tmpString += '</select> <input type="text" name="calTxtYear" value="' + this.year + '" size="4" maxlength="4" onBlur="gCalendar.YearOnBlur();">'
+ this.calSelectorBarBottom
+ this.calDayNameBar ;
// Body of calendar goes here
tmpString += '<TR>' ;
for(i = 0; i < firstDayOfMonth; i++)
{
tmpString += '<td align="center" class="cal" bgcolor="#ffffff">' + startOfPreviousMonth++ + '</td>' ;
numCols++ ;
}
for(i = 1; i <= lastDayOfMonth; i++)
{
// Call the method to create the cell contents
if(this.isToday(i,this.month,this.year))
{
tmpString += '<td align="center" class="calToday" bgcolor="#ffffff" style="background-color: gold"><a href="javascript
: void(0) ;" onClick="gCalendar.DayClick(' + i + ') ;" class="calWeekday"> ' + i + ' </a></td>' ;
}
else
{
tmpString += '<td align="center" class="cal" bgcolor="#ffffff"><a href="javascript
: void(0) ;" onClick="gCalendar.DayClick(' + i + ') ;" class="calWeekday"> ' + i + ' </a></td>' ;
}
numCols++ ;
/* Display new row after each 7 day block. */
if (numCols % 7 == 0)
{
tmpString += '</TR><TR>' ;
numRows++ ;
}
}
var counterCols = numCols ;
var j = 1 ;
for(i = counterCols; i < 42; i++)
{
// Call the method to create the cell contents
tmpString += '<td align="center" class="cal" bgcolor="#ffffff">' + j++ + '</td>' ;
numCols++ ;
/* Display new row after each 7 day block. */
if (numCols % 7 == 0)
{
tmpString += '</TR>' ;
if(i < 42) tmpString += '<TR>' ;
}
}
// End of BODY
tmpString += this.calBottomOuter ;
return tmpString ;
} // buildString
// renders string to canvass
suycCalendar.prototype.writeString = function(s)
{
if(browser.isNav4)
{
this.canvass.document.open() ;
this.canvass.document.writeln(s) ;
this.canvass.document.close() ;
}
else if (browser.isIE4 || browser.isDOM)
{
this.canvass.innerHTML = s ;
}
} // writeString
suycCalendar.prototype.formatDate = function(n)
{
return '' + n + '-' + this.months[this.month].substr(0,3) + '-' + this.year ;
}
// sets the chosen value in the target element
suycCalendar.prototype.setValue = function()
{
try
{
targetEnabled = this.target.disabled ;
this.target.disabled = false ;
this.target.value = this.getFormattedDate() ;
this.target.disabled = targetEnabled ;
}
catch(e)
{
var message ;
message = '-----------------\n'
+ '\t Calendar error! \n\n'
+ 'An error has occurred.\n'
+ 'The chosen value cannot be \n'
+ 'written to the target field.\n'
+ '-----------------' ;
alert(message) ;
}
} // setValue
// overrideable - optional to pass in yy/dd
// signatureA = daysInMonth() // defaults to this.year, this.month
// signatureB = daysInMonth(y,m)
suycCalendar.prototype.daysInMonth = function()
{
var oride = (this.daysInMonth.arguments.length == 2) ;
var year = oride ? this.daysInMonth.arguments[0] : this.year ;
var month = oride ? this.daysInMonth.arguments[1] : this.month ;
if(month == 1 && this.isLeapYear(year))
return (29) ;
else
return(this.monthDays[month]) ;
} // daysInMonth
// used to compare a date to TODAY. Used to color today.
suycCalendar.prototype.isToday = function(d,m,y)
{
var now = new Date() ;
var today = new Date(now.getYear(),now.getMonth(),now.getDate()) ;
var date = new Date(y,m,d) ;
return (date.toString() == today.toString());
} // isToday
// helper function
suycCalendar.prototype.isLeapYear = function()
{
if (this.year % 4 == 0 && (this.year % 100 != 0 || this.year % 400 == 0))
return(true) ; return(false) ;
} // isLeapYear
function handleDocumentClick(e)
{
if (browser.isIE4) e = window.event;
if (browser.isNav6)
{
var bTest = (e.pageX > parseInt(gCalendar.canvass.style.left) && e.pageX < (parseInt(gCalendar.canvass.style.left) + 162) && e.pageY < (parseInt(gCalendar.canvass.style.top)+163) && e.pageY > parseInt(gCalendar.canvass.style.top));
if ((e.target.name != 'imgCalendar' && e.target.name != 'calSelMonth') && !(bTest))
{
gCalendar.Hide() ;
}
}
if (browser.isIE4)
{
// extra test to see if user clicked inside the calendar but not on a valid date, we don't want it to disappear in this case
var bTest = (e.x > parseInt(gCalendar.canvass.style.left) && e.x < (parseInt(gCalendar.canvass.style.left) + 160) && e.y < (parseInt(gCalendar.canvass.style.top)+141) && e.y > parseInt(gCalendar.canvass.style.top));
if ((e.srcElement.name != 'imgCalendar' && e.srcElement.name != 'calSelMonth') && !(bTest))
{
gCalendar.Hide();
}
}
if (browser.isNav4) gCalendar.Hide();
}
window.document.onclick=handleDocumentClick;
</script>
<HTML>
<HEAD>
<TITLE>Demo page for the version 3.1 release of the suyc Calendar</TITLE>
<link rel="stylesheet" type="text/css" href="suycCalendarV3.css">
<script type="text/javascript" language="JavaScript" src="suycCalendar.
js"></script>
</HEAD>
<BODY BGCOLOR="white">
<CENTER>
<FORM NAME="frmMain">
<A HREF="javascript
: void(0) ;" ONCLICK="gCalendar.Show(event, 'frmMain', 'dtDate1', 'left') ; return false ;" TITLE="Calendar">
<img src="calendar.gif" border="0" ALIGN="absMiddle" name="imgCalendar"></A> <INPUT TYPE="text" NAME="dtDate1" DISABLED>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<INPUT TYPE="text" NAME="dtDate2" DISABLED> <A HREF="javascript
: void(0) ;" ONCLICK="gCalendar.Show(event, 'frmMain', 'dtDate2') ; return false ;" TITLE="Calendar">
<img src="calendar.gif" border="0" ALIGN="absMiddle" name="imgCalendar"></A>
<p>
<input type="submit" name="cmdSubmit" value="Submit" id="Submit1" onclick="return Submit1_onclick()">
</p>
</FORM>
</CENTER>
</BODY>
</HTML>
Submitting a form after a calendar date selection
