<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<META content="MSHTML 5.00.3314.2100" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV><FONT face=Arial size=2>Hello,</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2>I had the same question as you, but could not find
an existing Javascript that would mask a date field while being typed, so I had
to write my own.</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2>If you can use this, please do. </FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2><HTML><HEAD><TITLE>Date
Masking</TITLE></FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2><SCRIPT
LANGUAGE="JavaScript"><BR><!--</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2>////////////////////////////////////////////////////<BR><A
href="file://Globally">//Globally</A> defined -- you could move these around
//<BR><A href="file://to">//to</A> each function to make the code more
modular
//<BR>////////////////////////////////////////////////////</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2>var dtFormat = "MM/DD/YYYY";<BR>var sepChar =
'/';<BR>var fullDateMask = /^[01][0-9]\/[0-3][0-9]\/[2][0-9][0-9][0-9]/;<BR>var
lastKeyStrokeVal;<BR>var currMask;<BR>var monthVal;<BR>var dayVal;<BR>var
yearVal;<BR>var autoFillVal = '=';<BR>var day1Val;<BR>var day2Val;</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2><BR>//////////////////////////////////////////////////////////<BR>//
returnCurrentDate() : return the current system date //<BR>// in MM/DD/YYYY
format
//<BR>//////////////////////////////////////////////////////////<BR>function
returnCurrentDate()<BR>{<BR> d = new Date();<BR> m =
parseInt(d.getMonth())+1;<BR> if (m < 10)<BR>
{<BR> m = '0' + m;<BR>
}<BR> return(m + sepChar + d.getDate() + sepChar +
d.getYear());<BR>}</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2>////////////////////////////////////////////////////////////<BR>//
scrutinizeKeyVal() : apply mask to the keystroke value //<BR>// when each
keystroke is
typed
//<BR>////////////////////////////////////////////////////////////<BR>function
scrutinizeKeyVal(obj)<BR>{<BR>
////////////////////////////////////////////////////////////////////<BR>
// If using IE, the "String.fromCharCode(window.event.keyCode)"
//<BR> // will return the key value pressed. For Netscape, the
"which" //<BR> // keyword will return the keyvalue. NOT
TESTED WITH NETSCAPE YET //<BR>
////////////////////////////////////////////////////////////////////</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2> var length =
parseInt(obj.value.length);</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2> lastKeyStrokeVal =
String.fromCharCode(window.event.keyCode); // IE Only<BR> if
(lastKeyStrokeVal == autoFillVal)<BR>
{<BR> obj.value =
returnCurrentDate();<BR> return
-1;<BR> }<BR>
/////////////////////////////////////////////////////////<BR> // The
date format is mm/dd/yyyy and leading zeros are // <BR> // required
in the Months and Days
fields
//<BR>
/////////////////////////////////////////////////////////</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2>
/////////////////////////////////////////////<BR> // FIRST CHARACTER
TYPED - month field //<BR> // The first char
typed should be a 0 or 1 //<BR>
/////////////////////////////////////////////<BR> if (length ==
0) <BR> {<BR> currMask =
/^[0-1]/;<BR> if (!compareValue(lastKeyStrokeVal,
currMask))<BR>
{<BR> return
-1;<BR> }<BR> }<BR>
///////////////////////////////////////////////////////<BR> //
SECOND CHARACTER TYPED - month
field
//<BR> // if first char is 1, second char may only be 0,1,2
//<BR>
///////////////////////////////////////////////////////<BR> if
(length == 1) <BR> { <BR> if
(obj.value.charAt(length -1) == 1)<BR>
{<BR> currMask = /^[0-2]/; <A
href="file://months">//months</A> 10,11,12<BR>
}<BR> else<BR>
{<BR> currMask = /^[1-9]/; <A
href="file://months">//months</A> 01-09<BR>
}<BR> if (!compareValue(lastKeyStrokeVal,
currMask)) <BR>
{<BR> return
-1;<BR> }<BR>
//////////////////////////////////<BR> // capture the
month value and //<BR> // Autofill the first
delimiter //<BR>
//////////////////////////////////<BR> monthVal =
obj.value + lastKeyStrokeVal; <BR> return
1;
<BR> }<BR>
////////////////////////////////////////////<BR> // THE THIRD OR
SIXTH CHARACTER TYPED //<BR> // This
character should be the delimiter //<BR> // char for the date format
"MM/DD/YYYY" //<BR>
////////////////////////////////////////////<BR> if ((length == 2)
|| (length == 5)) <BR> {<BR>
currMask = /^\//;<BR> if
(!compareValue(lastKeyStrokeVal, currMask))<BR>
{<BR> return
-1;<BR> }<BR> }<BR>
///////////////////////////////////////////////////////<BR> // THE
FOURTH CHARACTER TYPED - day
field
//<BR> // The fourth char typed should be a
number...0,1,2,3//<BR> // We can't check for leap year yet because
we don't //<BR> // have the year value yet. This will need to
be //<BR> // done after the date field is
populated... //<BR>
///////////////////////////////////////////////////////<BR> if
(length == 3) <BR> { <BR>
currMask = /^[0-3]/;<BR> if
(!compareValue(lastKeyStrokeVal, currMask))<BR> {
<BR> return
-1;<BR> }<BR> day1Val =
lastKeyStrokeVal;<BR> }<BR>
//////////////////////////////////////////////////////////<BR> //
THE FIFTH CHARACTER TYPED - day
field
//<BR> // The fifth char typed should be a
number
//<BR> // if first char is 0, second char may only be
1-9 //<BR> // if first char is 1 or 2,
second char may only be 0-9 //<BR> // if first char is 3, second
char may only be 0-1 //<BR>
//////////////////////////////////////////////////////////<BR> if
(length == 4) <BR> {<BR>
if (day1Val == 0)<BR>
{<BR> currMask =
/^[1-9]/;<BR> }<BR> else if
((day1Val == 1) || (day1Val == 2))<BR>
{<BR> currMask =
/^[0-9]/;<BR> }<BR> else if
(day1Val == 3)<BR>
{<BR> currMask =
/^[0-1]/;<BR> }<BR>
else<BR> {<BR>
return -1;<BR> }<BR> if
(!compareValue(lastKeyStrokeVal, currMask))<BR>
{<BR> return
-1;<BR> }<BR> day2Val =
lastKeyStrokeVal;<BR> return 1;<BR>
}<BR>
//////////////////////////////////////////////////////////////<BR>
// THE SEVENTH CHARACTER TYPED - year
field
//<BR> // Safe to assume this character is going to be a 1 or 2...
//<BR>
//////////////////////////////////////////////////////////////<BR>
if (length == 6) <BR>
{<BR> currMask =
/^[1-2]/;<BR> if (!compareValue(lastKeyStrokeVal,
currMask))<BR>
{<BR> return
-1;<BR> }<BR> }<BR>
///////////////////////////////////////////////////////////<BR> //
THE EIGHTH, NINTH, TENTH CHARACTER TYPED - year field //<BR>
///////////////////////////////////////////////////////////<BR> if
((length == 7) || (length == 8) || (length == 9)) <BR>
{<BR> currMask =
/^[0-9]/;<BR> if (!compareValue(lastKeyStrokeVal,
currMask))<BR>
{<BR> return
-1;<BR> }<BR> } <BR>
/////////////////////////////////////////////////////////<BR> //
Finally, do a mask check for the date val so far... //<BR>
/////////////////////////////////////////////////////////<BR> if
(compareValue(lastKeyStrokeVal, currMask)) <BR>
{<BR> return 0;<BR> }<BR>
else<BR> {<BR> return
-1;<BR> }<BR>} <A href="file://end">//end</A>
scrutinizeKeyVal()</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2><BR>//////////////////////////////////////////////////////////<BR>//
processKeyPress(): Check the value of each keystroke //<BR>// as they are
typed
//<BR>//////////////////////////////////////////////////////////<BR>function
processKeyPress(obj) <BR>{<BR> var retVal =
scrutinizeKeyVal(obj);<BR> <BR> if (retVal == -1) //
scrutinizeKeyVal returned false: Key value does not match mask
//<BR> {<BR> return
false;<BR> }<BR> else if (retVal == 0) //
scrutinizeKeyVal returned true: Key value does match mask //<BR>
{<BR> return true;<BR>
}<BR> else if (retVal == 1) // scrutinizeKeyVal encountered
delimiter character //<BR> {<BR>
//////////////////////////////////////////////////////<BR>
// This will cancel the current keypress event and
//<BR> // force the separator char to be appended
in field //<BR>
//////////////////////////////////////////////////////<BR>
obj.value = obj.value + lastKeyStrokeVal +
sepChar;<BR> return false;<BR> }<BR>}
<A href="file://end">//end</A> processKeyPress()</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2><BR>////////////////////////////////////////////////////////<BR>//
isValidDate(): Determines if a date value is valid //<BR>// Uses the date format
"MM/DD/YYYY"
//<BR>////////////////////////////////////////////////////////<BR>function
isValidDate(obj) <BR>{<BR> var s
= new String;<BR> s = obj.value;<BR> monthVal =
s.charAt(0) + s.charAt(1);<BR> dayVal = s.charAt(3) +
s.charAt(4);<BR> yearVal = s.charAt(6) + s.charAt(7) + s.charAt(8) +
s.charAt(9);</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2> if (parseInt(dayVal) >
parseInt(daysInMonth(monthVal)))<BR>
{<BR> alert("bad
date");<BR>
obj.focus();<BR>
obj.select();<BR> return false;<BR>
}<BR> return true;<BR>} <A href="file://end">//end</A>
isValidDate()</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2><BR>/////////////////////////////////////////////<BR>// daysInMonth():
Determines the number of //<BR>// allowable days in a
month.
//
<BR>/////////////////////////////////////////////<BR>function
daysInMonth(charMonth)<BR>{<BR> if ((charMonth == "01") ||
(charMonth == "03") || (charMonth == "05")
<BR> || (charMonth == "07") || (charMonth ==
"08") || (charMonth == "10") <BR> ||
(charMonth == "12"))<BR> return 31;</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2> if (charMonth == "02")<BR>
{<BR> if
(isLeapYear(yearVal))<BR> return
29;<BR> return 28;<BR> }</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2> if ((charMonth == "04") || (charMonth
== "06") || (charMonth == "09") <BR> ||
(charMonth == "11"))<BR> return
30;<BR>}</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2><BR>//////////////////////////////////////////////<BR>// isLeapYear():
Determines if year is leap
//<BR>//////////////////////////////////////////////<BR>function
isLeapYear(intYear) <BR>{<BR> if ((intYear % 100 == 0) &&
(intYear % 400 == 0))<BR> {<BR> return
true; <BR> }<BR> else <BR>
{<BR> if ((intYear % 4) == 0)
<BR> return true;
<BR> return false;<BR>
}<BR>}</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2>////////////////////////////////////////////////////<BR>// clearFields():
Clears/resets all fields on the //<BR>// form to whatever you
want
//<BR>////////////////////////////////////////////////////<BR>function
clearFields()<BR>{<BR> DateField.value = "";<BR>
DateField.focus();<BR>}</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2><BR>//////////////////////////////////////////////////<BR>//
compareValue(): Compares a value to its mask //<BR>// (both args are passed
in)
//<BR>//////////////////////////////////////////////////<BR>function
compareValue(cmpVal, mask)<BR>{<BR> if(!cmpVal.match(mask))<BR>
{<BR> return false;<BR> }<BR> else<BR>
{<BR> return true;<BR> }<BR>}</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial
size=2><BR>/////////////////////////////////////////////////////////<BR>//
validateForm() : Validates the form when the Submit //<BR>// button is
pressed.
//<BR>/////////////////////////////////////////////////////////<BR>function
validateForm(obj)<BR>{<BR> if ((compareValue(DateField.value,
fullDateMask)) && isValidDate(obj))<BR>
{<BR> alert("Good date");<BR>
}<BR> else<BR> {<BR>
alert("Bad date");<BR>
DateField.focus();<BR> }<BR>}</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2><BR>// --><BR></SCRIPT></FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2></HEAD><BR><BODY BGCOLOR="white"
TEXT="#000000" LINK="#993366" VLINK="#660066" ALINK="#FF99FF"
onLoad="clearFields();"><BR><CENTER><BR><H1>Date Mask
Example</H1><BR><BR>It's somewhat rigid, but the following date
field only will accept the mask "MM/DD/YYYY"<BR><BR>Also, use the '=' char
to automatically fill in the current date<BR><BR><INPUT TYPE="TEXT"
SIZE=11 MAXLENGTH=10 NAME="DateField" onKeyPress="return processKeyPress(this);"
onFocus="self.status='Date Format is ' + dtFormat;" onBlur="self.status=' ';"
onChange="return isValidDate(this);"><BR><BR><BR><INPUT
TYPE="Button" NAME="btn_submit" VALUE="Test"
onClick="validateForm(DateField);"><BR></CENTER><BR></BODY><BR></HTML><BR></FONT></DIV></BODY></HTML>