...

View Full Version : Probelm in displaying date in text box



elayappan
06-19-2007, 03:55 PM
Hi Everyone,
I want to display the date 19/06/2007 in this format.I want to validate the number entered in the textbox i.e for first digit of date it should not accept more than 3 (accept only 0,1,2,3). When the text length reaches 3 & 5 ie after date & month, by default this function should return slash ( / ) - this is to avoid typing / from keyboard.
I don't have any idea to do this. Please help me for this issue.
I have added the function below, which I will be calling onkeypress event.

OnKeyPress="javascript:valNumber(this.value);"
function valNumber(value)
{

var x=value.length;
if(x==0 && (event.keyCode==48||event.keyCode==49||event.keyCode==50||event.keyCode==51))
event.returnValue=true;

else if(x==1 && (event.keyCode>47 && event.keyCode<58))
event.returnValue=true;

else if(x==2)
value = '/';

else
event.returnValue=false;
}

Philip M
06-19-2007, 04:20 PM
The full-blown regex to validate any date in dd/mm/yyyy format including leap years is:-

if (/^((((0?[1-9]|[12]\d|3[01])[\/](0?[13578]|1[02])[\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|[12]\d|30)[\/](0?[13456789]|1[012])[\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|1\d|2[0-8])[\/]0?2[\/]((1[6-9]|[2-9]\d)?\d{2}))|(29[\/]0?2[\/]((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00)))|(((0[1-9]|[12]\d|3[01])(0[13578]|1[02])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|[12]\d|30)(0[13456789]|1[012])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|1\d|2[0-8])02((1[6-9]|[2-9]\d)?\d{2}))|(2902((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00))))$/.test(theDateString.value)) { // Date in dd/mm/yyyy format with leap years

I don't recommend that you add the slashes automatically as it is difficult to distinguish 2/3/2007 and 02/03/2007. If the user types a 1 how do you know whether that is just 1 or the first digit of 15? The leading zeroes are optional in the above.

Another rather simpler regex which only works correctly for dates in the 21st century (2000-2099) is:-

if (/^(((((0?[1-9])|(1\d)|(2[0-8]))\/((0?[1-9])|(1[0-2])))|((31\/((0[13578])|(1[02])))|((29|30)\/((0?[1,3-9])|(1[0-2])))))\/((20[0-9][0-9]))|(29\/0?2\/20(([02468][048])|([13579][26]))))$/.test(theDateString.value)) { // date in dd/mm/yyyy format taking account of leap years

Again, leading zeroes are optional.


You can test your regular expressions at: http://www.ogauge.co.uk/regextester.html

Ancora
06-19-2007, 09:31 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function validate(nField){

var splitDate = nField.value.split("/");
var refDate = new Date(splitDate[2],splitDate[1]-1,splitDate[0]);
if (splitDate[1] < 1 || splitDate[1] > 12 || refDate.getDate() != splitDate[0] || splitDate[2].length != 4 || (!/^20/.test(splitDate[2])))
{
nField.value = "";
nField.focus();
return false;
}
return true;
}

function verify(nField){

if (/\/{2,}$/.test(nField.value))
{
nField.value = nField.value.replace(/\/{2,}/,"/");
return false;
}
if (/^\d{2}$/.test(nField.value) || /^\d{2}\/\d{2}$/.test(nField.value))
{
nField.value += "/";
return false;
}
if (!/^\d+$/.test(nField.value))
{
nField.value = nField.value.replace(/[^\d/{1}]/g,"");
}
if (/^\d{2}\/\d{2}\/\d{4}$/.test(nField.value))
{
if (!validate(nField))
{
alert('Invalid date');
return false;
}
}
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:200px;margin:auto;font-family:times;font-size:12pt}
fieldset {width:200px;background-color:#f0fff0;border:1px solid #87ceeb}
label {font-family:times;font-size:12pt}
legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Form</legend>

<label>Some Date&nbsp;&nbsp;&nbsp;<input type='text' name='date1' size='9' onkeyup="verify(this)"></label>
<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>
</body>
</html>

elayappan
06-20-2007, 04:42 AM
Hello Ancora,
Thanks for your kind reply. Though I am new to javascript, I have few doubts.
In, (/^\d{2}$/.test(nField.value) || /^\d{2}\/\d{2}$/.test(nField.value))
what does the test method do and this method is not declared from where it comes?
what is d{2}, d{4}, d{1}?
what does / \ ^ $ . g these do?
In validate the year, what is the usage of (!/^20/.test(splitDate[2]) ?
Please help me to get clear of your code.

Philip M
06-20-2007, 08:23 AM
Suggest you have a look at a tutorial on regular expressions, e.g.

http://www.javascriptkit.com/javatutors/re.shtml

Briefly:-

(/^\d{2}$/.test(nField.value) || /^\d{2}\/\d{2}$/.test(nField.value))

says test the string value and if consists of two digits (and nothing but) OR if consists of two digits followed by a slash followed by two digits (and nothing but) return TRUE. Otherwise return FALSE.

\d{2}, \d{4}, \d{1} (note the backslash \ which is the escape character required to match a special character literally, or to cause a normal character to be interpreted as a special character, i.e. not literally).
\d{2} means two digits, \d{4} means four digits etc. \d{3,5} means three, four OR five digits.
d by itself is the literal character d.

(!/^20/.test(splitDate[2]) means test that the first two digits of the year portion of the field (splitDate[2]) are 20 and if they are not (!) return FALSE. i.e. check if the year entered is in the current century. In English, if the first two digits of the year are not 20 then return false.

/ \ ^ $ \. /g You need to refer to the tutorial mentioned.
^ (in this context) means match from the start of the string
$ means match up to the end of the string.

Regular expressions are quite difficult to learn but extremely rewarding once you have mastered them.

Ancora's code is a clever method of date validation which compares the date entered against a reference date supplied by the getDate() function.
So if the user enters (say) 32/06/2007 getDate() returns the valid date of 02/07/2007 and thus the two do not match, hence an invalid date was entered.

Ancora
06-20-2007, 11:25 AM
elayappan:

Phillip M kindly answered each of your follow-up questions, and provided a link to additional information.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum