Way to Enter a Time

gradinumcp · Aug 25, 2005

Hi! I am building a timesheet application where the administrator should be able to login and be able to enter a time if someone has forgotten to logout.

So I have having an inpur field where the administrator could fill in the time. Is there a way to have a particular format (eg. 12:30:28) so that the user can go in type 12 then cursor automatically moves across the colon sign to the next and so on.

Also the time should be valid--meaning in a 12-hour clock and not exceeding 60 mins or 60 seconds. Also how does this time get stored---so i can retrieve it and put it into the database?

Any clues--Thanks in advance for your suggestions

)

DreamerZ · Aug 25, 2005

Trying looking at the onchange() event for the input field. With the onchange, you can check each change to the field and validate if there are 2 characters in the field, then print the colon, 4 characters, print another colon.

For a valid time, you could create another function that parses the value of the field and checks each part to ensure the hours, minutes, and seconds are valid. Try looking at substr and indexOf for more information.

Hope that helps.

DreamerZ

BillyRayPreachersSon · Aug 25, 2005

This should get you started... it's some code I wrote a while back to do a similar job. It's not perfect, and the backspace key & delete key functionality works a bit differently in IE to Firefox... but it's not bad.

Code:

<html>
<head>
	<script type="text/javascript">
	<!--

		function isNumber(keyCode, modifiderKey) {
			return(((theChar = String.fromCharCode(keyCode)) >= '0' && theChar <= '9') && !modifiderKey);
		}

		function checkHours(evt) {
			evt = (evt) ? evt : event;
			var textObj = document.forms[0].elements['hours'];
			if (textObj.value.length == 2 && isNumber(evt.keyCode, evt.shiftKey || evt.ctrlKey)) textObj.form.elements['mins'].focus();
		}

		function checkMins(evt) {
			evt = (evt) ? evt : event;
			var textObj = document.forms[0].elements['mins'];
			if (textObj.value.length == 0 && (evt.keyCode == 8 || evt.keyCode == 46)) textObj.form.elements['hours'].focus();
			if (textObj.value.length == 2 && isNumber(evt.keyCode, evt.shiftKey || evt.ctrlKey)) textObj.form.elements['secs'].focus();
		}

		function checkSecs(evt) {
			evt = (evt) ? evt : event;
			var textObj = document.forms[0].elements['secs'];
			if (textObj.value.length == 0 && (evt.keyCode == 8 || evt.keyCode == 46)) textObj.form.elements['mins'].focus();
		}

		window.onload = setupKeys;

		function setupKeys() {
			var frm = document.forms[0];
			frm.elements['hours'].onkeyup = checkHours;
			frm.elements['mins'].onkeyup = checkMins;
			frm.elements['secs'].onkeyup = checkSecs;
		}

	//-->
	</script>
</head>

<body>
	<form name="myForm" action="somepage.html" method="post">
		Please enter the time:
		<input type="text" name="hours" maxlength="2" size="2" />
		:
		<input type="text" name="mins" maxlength="2" size="2" />
		:
		<input type="text" name="secs" maxlength="2" size="2" />
	</form>
</body>
</html>

However, what worries me is the fact that you're building what would potentially be a complex application (timesheeting can get really complicated), without knowing the fundamentals in advance. I would never embark on the actual coding of a project like this without knowing anything about my data storage, for example.

I really would put the coding aside, and work out your application structure. Write up some functional and technical specs, for without these, you'll just be "winging it" - and so many projects fall down, or go over time and budget because of this.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

gradinumcp · Aug 26, 2005

Hey guys--thanks for all your suggestions.

I did try something like what billyray's code does,however I want just one field to enter the time. And in it when the user inputs the hours something like 12, it should show a colon then again 2 spaces to enter minutes, then seconds and finally 2 spaces to enter AM or PM. Each time the user enters the numbers it should check to see that he does not enter anything more than 12 for hours, not more than 60 for mins and seconds.

Any kind of code in the similar lines is highly appreciated. I am a newbie to Javascript!!!

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!

Way to Enter a Time

gradinumcp

IS-IT--Management

DreamerZ

Programmer

BillyRayPreachersSon

Programmer

gradinumcp

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor