Solved

Time field input mask

Posted on 2004-04-05
12
2,085 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

636 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