Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Location
    India
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Probelm in displaying date in text box

    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;
    }

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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
    Last edited by Philip M; 06-19-2007 at 06:34 PM. Reason: Fixed bug in regex

  • #3
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Code:
    <!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>

  • #4
    New to the CF scene
    Join Date
    Apr 2007
    Location
    India
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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.
    Last edited by Philip M; 06-20-2007 at 09:36 AM.

  • #6
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    elayappan:

    Phillip M kindly answered each of your follow-up questions, and provided a link to additional information.
    Last edited by Ancora; 06-20-2007 at 12:06 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •