DATE INPUT MASK TEXT FIELD MM/DD/YYYY

Hello I need to know how to put a input mask so when the user types onkeydown the format comes out __/__/____.  I don't want to split the boxes right now because I have alot of validation already for date but the user has to type slashes.
InvisibleManAsked:
Who is Participating?
 
a.marshConnect With a Mentor Commented:
Whenever I do this I always use three separate textboxes - make it much easier.

And if you are unable to alter any of the server-side scripting that interacts with the database etc., then you should be able to manipulate things with javascript.

I'll put an example together for you.

:o)

Ant
0
 
bebonhamCommented:
fun

<SCRIPT>

function handleKey(e)
{
chco= (document.layers) ? e.which : event.keyCode;
key = String.fromCharCode(chco)
d=document.forms[0].date
d.value=d.value.replace(/_/,key)
}


</SCRIPT>

<FORM>
<INPUT TYPE="TEXT" NAME="date" value="__/__/____" MAXLENGTH="10" ONFOCUS="document.onkeypress=handleKey" ONBLUR="document.onkeypress=null">
</FORM>
0
 
InvisibleManAuthor Commented:
I cant have that value in the textbox because I am pulling a value in some cases from the database so value="<%=datep%>"
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
InvisibleManAuthor Commented:
I cant have that value in the textbox because I am pulling a value in some cases from the database so value="<%=datep%>"
0
 
InvisibleManAuthor Commented:
a marsh I can't use 3boxes there is already validation with the box as it is and the users dont want that.
0
 
bebonhamCommented:
try this:

<SCRIPT>
var i=0
function handleKey(e)
{
chco= (document.layers) ? e.which : event.keyCode;
key = String.fromCharCode(chco)
d=document.forms[0].date
if(d.value.length>=10){
return false
}
ld=d.value.split("")
ld[i]=key
i++
d.value=ld.join("")
if(i==2 || i==5){
ld[i]='/'
i++
d.value=ld.join("")
}
return false
}



</SCRIPT>

<FORM>
<INPUT TYPE="TEXT" NAME="date" ONKEYPRESS="return handleKey()" MAXLENGTH="10">
</FORM>
0
 
InvisibleManAuthor Commented:
bebonham still is not working it jumbles things up and doesnt even let me type anything most times.
0
 
bebonhamCommented:
yeah, it'll do that in netscape, it works perfectly in ie though.


this is the best it is going to get unless you use 3 fields...

I suggest you use browser sniffing and use this only for ie..

which is over 80% of all people...


0
 
bebonhamCommented:
either that or reject my answer and accept someone elses, but I don't think anything else needs to be said, unless you are having problems with my script in ie, or you decide to use 3 boxes.
0
 
LunchyCommented:
InvisibleMan please either:

1. Award the question to an expert
2. Request points refunded for no answer

Do not accept this comment as an answer!

Lunchy
Friendly Neighbourhood Community Support Moderator
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.