Solved

Time field input mask

Posted on 2004-04-05
12
2,081 Views
Last Modified: 2007-12-19
I've searched all over the internet for several days, and have yet to find anyone that has an input mask for time fields already written, although I know there out there somewhere.  Anyway, I was hoping one of you could help me out with this.  I don't know Javascript very well, so I can't write it.

What I'm looking for is a time field input mask that will automatically format the field to this (hh:mm xm) format, but the user has to be able to input the a or p for am or pm.  I'm trying to avoid using military time.

Thanks,
Steve
0
Comment
Question by:scross1276
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
  • +1
12 Comments
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10760330
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function formatTime(strField){
      var oLen = strField.value.length;
            if(oLen == 2){strField.value += ":";}
            if(oLen == 5){strField.value += " ";}
            if(oLen == 7){strField.value += "m";}
}
//(hh:mm xm)
// -->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="time" maxlength="8" size="8" onkeypress="formatTime(this);" />
</form>
</body>
</html>
0
 

Author Comment

by:scross1276
ID: 10760407
Thanks for the quick response, and yes, that works great, but the "m" doesn't populate unless I press the letter m, which gives me two m's.  Any ideas?
0
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 50 total points
ID: 10760798
try this

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function formatTime(strField){
     var oLen = strField.value.length;
          if(oLen == 2){strField.value += ":";}
          if(oLen == 5){strField.value += " ";}
          if(oLen == 7){strField.value += "m";}
}
//(hh:mm xm)
// -->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="time" maxlength="8" size="8" onkeyup="formatTime(this);" />
</form>
</body>
</html>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 63

Expert Comment

by:Zvonko
ID: 10761230
How about this:

<html>
<head>
<script>
function checkTime(theField){
  val = theField.value;
  time = /^([012]|[012][0-9]|[012][0-9]\:|[012][0-9]\:[0-5]|[012][0-9]\:[0-5][0-9]|[012][0-9]\:[0-5][0-9]\ |[012][0-9]\:[0-5][0-9]\ [ap]|[012][0-9]\:[0-5][0-9]\ [ap]m)$/i;
  if(val.match(time)){
    if(val.length==2) theField.value=val+":";
    if(val.length==5) theField.value=val+" ";
    if(val.length==7) theField.value=val+"m";
  } else {
    theField.value = val.replace(/[^0-9\:\ apm]/gi,'');
  }
}
</script>
</head>
<body onLoad="document.forms[0].userTime.focus()">
<form>
<input type=text name="userTime" maxlength="8" size="7" onKeyUp="checkTime(this)" >
</form>
</body>
</html>


0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10761252
And here an older discussion on the same topic: http:Q_20783895.html

0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10765535
WOW
i write the code and someone else changes one word from onkeypress to onkeyup and they get all 50 glad it was not a 500 pointer
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10765574
The GwynforWeb is so chocked that he can not complain.
He has to ask his hubby first :)
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10765600
Its no big deal, it should have been splitted but thats another day
0
 

Author Comment

by:scross1276
ID: 10767748
I agree with jaysolomon, his code was identical with the exception of the press versus up.  I wanted to split the points, but didn't find the option, so I went with gwynforweb since theirs worked perfecly, but while we're discussing perfect, zvonko's also worked perfectly.  If you can split the points, then give jaysolomon 40, and gwynforweb 10 since gwynforweb just copied it.  If not, everyone needs to understand why I did what I did.

Sorry about the mixup.
0
 

Author Comment

by:scross1276
ID: 10774180
sure
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question