Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

simple "mm/yy date field" formatting 1

Status
Not open for further replies.
jaredc

jaredc

Programmer
Jun 28, 2002
43
GB
Hi

I recently posted a message in the HTML/CSS formum regarding formatting a INPUT field on an HTML FORM for date entry purposes.

I was very helpfully directed to this resource:


What I actually want to do, is to enable the INPUT field to be validated to check that a date has been entered in "mm/yy" format. I reckon I can bodge the number validation with my rather limited javascript skills (perhaps some long winded if statements) but what I really like is the way that a "/" character magically appears in examples shown from the above resource when typing in the data. I also like the way the length of the input field is limited to the amount of characters required.

Unfortunately I can't work out where this is being done within the source code supplied with the example and wondered whether anyone could steer me in the right direction. With many thanks in advance for any help and advice.
 
Sort by date Sort by votes
this should work:
Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 FINAL//EN&quot;>
<html>
<head>
<title>date magic</title>

<script name=&quot;javascript&quot;>
function formatDate(sValue) {
	if (sValue.length == 2 || sValue.length == 5)
		document.forms[0].datefield.value = sValue + &quot;/&quot;;
}
function validDate(sValue) {
	var bad = false;
	var dTest = new Date(sValue);

	if (isNaN(dTest.getTime()))
		bad = true;

	if (dTest.getDate() != sValue.substring(3,5))
		bad = true;

	if (bad) alert(&quot;Please enter a valid date.&quot;);
}
</script>

<style type=&quot;text/css&quot;>
</style>

<meta name=&quot;author&quot; content=&quot;?&quot;>
<meta name=&quot;keywords&quot; content=&quot;?&quot;>
<meta name=&quot;description&quot; content=&quot;?&quot;>
</head>

<body onload=&quot;&quot;>
<form>
<input type=&quot;text&quot; name=&quot;datefield&quot; onkeyup=&quot;formatDate(this.value);&quot; onblur=&quot;validDate(this.value);&quot; maxlength=&quot;10&quot; />
</form>
</body>
</html>

===================================================================== ======================================

if (!succeed) try();
-jeff
 
Upvote 0 Downvote
Thanks Jeff, that is superb! Your code is much, much shorter than that I had previously been directed to (which is good!)

If I've got this right I think you are converting the &quot;input string&quot; (svalue) and testing it using Date funtion(s) and the isNaN to validate whether or not the string is a valid date containing numeric characters only. (I've found definitions/explanations of these functions at
What I'm wondering is that if I try to amend your code supplied to accept the date in &quot;mm/yy&quot; format rather than &quot;dd/mm/yyyy&quot; will the Date function(s) still work? I've tried altering a few of the variables but I think I'm getting a little confused!

Thanks once again for your help,
Mike
 
Upvote 0 Downvote
Mike,

You're correct - more specifically, I use isNaN() to test the results of Date.getTime(). getTime() returns a millisecond representation of a Date object, and will not work when an invalid date is entered such as &quot;a7/r4&quot;.

However, javascript will accept &quot;12/55/1999&quot; as a valid date, and will internally correct it to &quot;01/24/2000&quot; - for this reason I check Date.getDate() against characters 3 & 4 to see if they match...

Converting it to &quot;mm/yy&quot; format is simple:

1. In formatDate() we only want to check for a length of 2, since the total will be 5.

2. in validDate(), we'll split sValue into an Array to make working with it easier.

3. we won't actually have to use any Date objects - we can simply check to make sure that the sValue Array contains numbers only (I'm using a regular expression), and that the month value is between 1 and 12.

4. change the &quot;maxlength&quot; of the form input field to 5.


Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 FINAL//EN&quot;>
<html>
<head>
<title>date magic</title>

<script name=&quot;javascript&quot;>
function formatDate(sValue) {
	if (sValue.length == 2)
		document.forms[0].datefield.value = sValue + &quot;/&quot;;
}
function validDate(sValue) {
	var bad = false;
	sValue = sValue.split('/');
	var pattern = /^\d+$/;

	if (sValue[0] < 1 || sValue[0] > 12)
		bad = true;

	if (!pattern.test(sValue[0]) || !pattern.test(sValue[1]))
		bad = true;

	if (bad) alert(&quot;Please enter a valid date in MM/YY format.&quot;);
}
</script>

<style type=&quot;text/css&quot;>
</style>

<meta name=&quot;author&quot; content=&quot;?&quot;>
<meta name=&quot;keywords&quot; content=&quot;?&quot;>
<meta name=&quot;description&quot; content=&quot;?&quot;>
</head>

<body onload=&quot;&quot;>
<form>
<input type=&quot;text&quot; name=&quot;datefield&quot; onkeyup=&quot;formatDate(this.value);&quot; onblur=&quot;validDate(this.value);&quot; maxlength=&quot;5&quot; />
</form>
</body>
</html>



======================================

if (!succeed) try();
-jeff
 
Upvote 0 Downvote
Thanks once again Jeff, that is even more superb, and is working in exactly the way I was after! The only part of the code I don't really understand is the
Code: 
var pattern = /^\d+$/;
I see that pattern is compared to sValue to check that it contains numeric data only (I think) - is this working in kind of the same way as isNaN() used in the previous example, with the value of pattern representing the 'illegal' non-numeric characters? Or am I way off the mark!

Please don't feel obligated to answer this as you have already helped me no end! But they do say 'if you don't ask you don't get'..
Thanks once again
Mike
 
Upvote 0 Downvote
Hi Mike,

Yes - this is what the pattern does. It's called a regular expression (or regex) - they're used a lot in Perl programming, and now javascript supports them...very handy for working with strings.

the two forward slashes at either end delimit the regex; the ^ and $ mean the start and end of the string; &quot;\d&quot; is regex for numbers only, and &quot;+&quot; means at least one or more...this all adds up to &quot;the whole string must be at least one number character&quot;

(isNaN(sValue[0]) || isNaN(sValue[1])) would also work.
======================================

if (!succeed) try();
-jeff
 
Upvote 0 Downvote
I think I understand that - but I'm afraid Perl progamming is even more alien to me than javascript, c++, etc. (i'm from the noddy school of VB...)!

Thanks once again for all your help - and I might even have learnt something today!
Cheers
Mike
 
Upvote 0 Downvote
No problem!

The O'Reily book &quot;Mastering Regular Expressions&quot; by Jeffrey Friedl is a great book for learning regex. they can simplify scripts significantly...
======================================

if (!succeed) try();
-jeff
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
338
gmmastros
gmmastros
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
771
lexer
lexer
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
245
ggriffit
ggriffit
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
331
ggriffit
ggriffit
JPSeo
  • Locked
  • Question
simple SyntaxError: missing ) after argument list error
Replies
2
Views
287
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top