Maskin Time input

@drewexFeb 12.2004

Hi is there a good working
time masking for a input box.

Ive looked those ##:## thing but they are not good . you cannot write 100 to enter 1:00.
Any ideas

to post a comment

27 Comments(s) _↴

@David_HarrisonFeb 12.2004 — #Tell me what a time mask is and if I have the time and energy I might write one for you. ?

@drewexauthorFeb 12.2004 — #Like date/Time but just the time part. 12:00 or 23:13 some thing like that.

@David_HarrisonFeb 12.2004 — #So what do you want it to do, the user enteres a number and the script converts it into a time?

@drewexauthorFeb 12.2004 — #dont you know whats masking is ahhh.

look at this example. For masking. I thouht i was the one asking. for help

[URL=http://javascript.internet.com/forms/dfilter.html]http://javascript.internet.com/forms/dfilter.html[/URL]

@David_HarrisonFeb 12.2004 — #Is that all it is? It's just a way of forcing the user to input information in a very specific pre-formatted way.

I've never made anything like this so I'm not sure how long it will take me, I'll try my best to get it done as soon as pos.

@drewexauthorFeb 12.2004 — #Yeap thats all it. But u should be care full at time entry.

because its little bit complicated like you should look for 100 should be 1:00. when they enter 100 it should get it 10:0 it should understand it. maybee it should wait dont know how to do it. thats why im asking. I know im asking for something really hard. Take your time on it.

@David_HarrisonFeb 12.2004 — #I was going to make it so that when if you were to enter 1234 the progression would be like this:

0:00

0:01

0:12

1:23

12:34

Edit:

But of course if you tried to enter 3456 then it would do this:

0:00

0:03

0:34

3:45

3:45 (stays on 3:45 when you enter the 6 since 34:56 is not a valid time)

I assume you want a 24 hour clock by the way.

Another Edit:

If the user were to enter 1923 then the script would do this:

0:00

0:01

0:19

19:20 (Jumps to 19:20 since 1:92 is not a valid time, the script must "remember" that the user did not enter the last 0 though)

19:23

@drewexauthorFeb 12.2004 — #Its sound great

If they enter A or P at the it could check that too. Your got a good idea there. Lets see what comes up.

@David_HarrisonFeb 14.2004 — #In case you were wondering what happened to your script, don't worry, I've not forgotten about it. It's just that the concept sounds simple, but the logic of the if's and else's and what-have-you's is defeating me at the moment, shouldn't be much longer though (I hope).

@drewexauthorFeb 17.2004 — #Hi,

Im getting little desperate right now. I think in few hours maybe end of the day im going to write my own because Its getting little bit urgent. I hope you can finish it soon. Thanks a lot for the work.

@David_HarrisonFeb 17.2004 — #Here's what I came up with. Now be warned, this is NOT a time mask, it's just a little bit different. The code for the mask proved just a little bit beyond my reach, so I've done the next best thing.

The user simply enters some numbers and when the text box loses focus the script formats those numbers to a correct 24 hour time. Since the event handler is run onblur and onsubmit the user CANNOT submit the page with an incorrect time entered, the script will format it before any submitting is done. See what I mean, the next best thing. ?

I hope this is OK, I know it's not what I promised but it does the job just as well.

[upl-file uuid=adfbf506-5e5a-43c4-b68b-9a6041df034d size=2kB]time mask.txt[/upl-file]

@drewexauthorFeb 17.2004 — #Hi, i did looked at it. But its not what im really looking for. Thanks anyway for your time.

@David_HarrisonFeb 17.2004 — #You want the mask right? I knew it, I'll see what I can do, I've had another idea that might just work.

@David_HarrisonFeb 17.2004 — #Is this more what you want:

[upl-file uuid=8b5afa4a-5262-4659-a87e-e28896b1e0f1 size=2kB]time mask2.txt[/upl-file]

@drewexauthorFeb 17.2004 — #Now your talking. This thing is great. Just the thing I wanted. Your the best man(or woman). This save me a dozen of time. I cant thank enough. Great work. I'll add some stuff to this like it jumps to the of the input cant write at the mid but its great thanks a lot.

I have another challenge for you if you want. I need a Date Masking option. something like this. __/__/____ ok this how it should look in the input's value. and they should type in to this. do you wanna play wwith this one too. Or is it too much for now?

But if you want to do it or not the time masking code you have written is great.

@David_HarrisonFeb 17.2004 — #I'll have a stab at the date one although the script will have to check that the date entered is valid for that month or year, for example Feb 29 is only valid for 2004, 2008 2012 etc. whereas Feb 30 is never valid.

What order do you want the date to be in? The English way dd/mm/yyyy or the American way mm/dd/yyyy?

Also, I'm glad you like the Time Mask script but I found a bug in it, just try entering 16:57. The script does this:

00:01

00:16

16:50

16:50 (does not allow the final 7 because then the time would be 16:507)

I'll have to find a way around this bug.

@drewexauthorFeb 17.2004 — #I think i can fix that bug. The date format is mm/dd/yyyy or mm/dd/yy one of them. And this is a bit harder then the time i think. I have a few days for doing this. If you can do it till the end of this week may bee start of the week it will be great or Ill use one that ifound on the web but doesnt work very well.

Like this one. They got the idea but still its not that good.

http://javascript.internet.com/forms/dfilter.html

well take a look on it. Thanks for every thing.

@David_HarrisonFeb 17.2004 — #What do you have to do all these for anyway?

@drewexauthorFeb 17.2004 — #My boss wants these for the page we are designing for our clients. And they have to enter the date and time.

@AnacondaAndyFeb 17.2004 — #lavalamp, here is a script that I wrote recently(with a little help from pitman ?) that checks if a year is a leap year or not. I don't think this will help you any but I though I'd post it anyway.

[upl-file uuid=11189c91-7dcc-46f6-9cdc-316f417d36bb size=1kB]the_year.txt[/upl-file]

@drewexauthorFeb 17.2004 — #Hey I founded another error. In the time mask code. try entring 600. It craches after typing 60. I've changed the ? that u used to ifs so its easer to understand. Im working on the bugs. Trying it to go in all the ifs.

@drewexauthorFeb 17.2004 — #Sorry my mistake that wasnt an error. Ill take a look in all the parts.

@David_HarrisonFeb 18.2004 — #drewex - Yeah, sorry about that drewex, once I've coded something I tend to crunch it into as small a place as possible. Perhaps discovering those operators was more of a curse for me. ?

AnacondaAndy - Thankyou for posting your script but I have a date difference script that I will be able to modify.

<i>
 </i>
 function dd(){
 if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){date=31;}
 else if(month==4 || month==6 || month==9 || month==11){date=30;}
 else if(month==2 &amp;&amp; year/4==Math.round(year/4)){date=29;}
 else{date=28;}
 }

@David_HarrisonFeb 23.2004 — #Sorry drewex but I haven't even been able to start that script yet, I just haven't had the time.

I might be able to come up with one before the end of the week but I'm not certain about that. Do you even still need it or have you written one yourself?

@drewexauthorFeb 24.2004 — #Sorry I forgot to reply you. I did wrote my self a date and Time mask. that uses eventcode. its little different then yours. but it works. Sorry if i made you work more on it thanks for your help.

@David_HarrisonFeb 24.2004 — #That's OK, so long as you sorted out your problem.

@jarryOct 04.2006 — #Thre is a good example out there.

[URL=http://www.wiseblocks.com/input-components/edit-mask-ICTextMask.html]http://www.wiseblocks.com/input-components/edit-mask-ICTextMask.html[/URL]

Also in #JavaScript _↴

Delay timer on this script AJAX does not work with https ON "event"

Success!

Help @drewex spread the word by sharing this article on Twitter...

Tweet This

Maskin Time input

27 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Maskin Time input

27 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

27 Comments(s) _↴

Also in #JavaScript _↴