Any ideas for a time clock?

@bluecaterpillarApr 18.2006

My husband is having trouble with an employee who is frequently late. A time clock would be ideal, but it’s a small business and to make such a purchase for just one employee would be too much.

Might there be a way to have a program where he could just click onto a page and print out the date and time when he comes in each day? We could attach it to the shop’s website.

I’m very new to Javascript, obviously.

Thanks for your help!

Rebecca

to post a comment

JavaScript

18 Comments(s) _↴

@DARTHTAMPONApr 18.2006 — #Should be able to build a form that allows the user to enter a username and use javascript to get the current date when the submit button is hit creating a hidden field in the html. When submitted you can use your serverside language to either stor the user name and date/time into a flat file or database.

dateVar = new Date("month day, year hours:minutes:seconds")

//to get the current date

document.formname.fieldname = dateVar;

<input type=hidden name=date>

The only issue with this would be that the time is kept on the client machine. So if the employee is late he/she could reset the clock on there computer and change the actual time that they logged in.

@James_GatkaApr 18.2006 — #

[CODE]<html>
 <head>
 <script type="text/javascript">
 
  function calc(nForm){ 
 
   var inHour = nForm.inHr.selectedIndex-1;
   var inMinutes = nForm.inMin.selectedIndex-1;
   var lunchOutHour = nForm.lunchOutHr.selectedIndex-1;
   var lunchOutMinutes = nForm.lunchOutMin.selectedIndex-1;
   var lunchInHour = nForm.lunchInHr.selectedIndex-1;
   var lunchInMinutes = nForm.lunchInMin.selectedIndex-1;
   var outHour = nForm.outHr.selectedIndex-1;
   var outMinutes = nForm.outMin.selectedIndex-1;
 
   if (inHour == -1 || inMinutes == -1 || lunchOutHour == -1 || lunchOutMinutes == -1 || lunchInHour == -1 || lunchInMinutes === -1 || outHour == -1 || outMinutes == -1){alert('Incomplete Information');return false}
 
   var linearInTime = 60*(inHour)+(5*inMinutes);
   var linearLunchOutTime = 60*(lunchOutHour)+(5*lunchOutMinutes);
   var linearLunchInTime = 60*(lunchInHour)+(5*lunchInMinutes);
   var linearOutTime = 60*(outHour)+(5*outMinutes);
 
   if (linearLunchOutTime < linearInTime || linearLunchInTime < linearLunchOutTime || linearOutTime < linearLunchInTime){alert('Invalid Information');return false}
 
   var workDay = linearOutTime-linearInTime;
   var lunchPeriod = linearLunchInTime-linearLunchOutTime;
   var linearMinutesWorked = workDay-lunchPeriod;
 
   var hoursWorked = parseInt(linearMinutesWorked/60);
   var minutesWorked = linearMinutesWorked-(hoursWorked*60)
 
   if (hoursWorked < 10){hoursWorked = "0"+hoursWorked}
   if (minutesWorked < 10){minutesWorked = "0"+minutesWorked} 
 
   nForm.timeWorked.value = hoursWorked+":"+minutesWorked;
  }
 
 </script>
 </head>
 <body>
 <form name='timeSheet'>
 Clock In: 
 <select name='inHr'>
 <option> Hour </option>
 <option> 12 Midnight </option>
 <option> 1 AM </option>
 <option> 2 AM </option>
 <option> 3 AM </option>
 <option> 4 AM </option>
 <option> 5 AM </option>
 <option> 6 AM </option>
 <option> 7 AM </option>
 <option selected> 8 AM </option>
 <option> 9 AM </option>
 <option> 10 AM </option>
 <option> 11 AM </option>
 <option> 12 Noon </option>
 <option> 1 PM </option>
 <option> 2 PM </option>
 <option> 3 PM </option>
 <option> 4 PM </option>
 <option> 5 PM </option>
 <option> 6 PM </option>
 <option> 7 PM </option>
 <option> 8 PM </option>
 <option> 9 PM </option>
 <option> 10 PM </option>
 <option> 11 PM </option>
 </select>
 &nbsp
 <select name='inMin'>
 <option> Min </option>
 <option> 00 </option>
 <option> 05 </option>
 <option> 10 </option>
 <option> 15 </option>
 <option> 20 </option>
 <option selected> 25 </option>
 <option> 30 </option>
 <option> 35 </option>
 <option> 40 </option>
 <option> 45 </option>
 <option> 50 </option>
 <option> 55 </option>
 </select>
 <br>
 Lunch Out:
 <select name='lunchOutHr'>
 <option> Hour </option>
 <option> 12 Midnight </option>
 <option> 1 AM </option>
 <option> 2 AM </option>
 <option> 3 AM </option>
 <option> 4 AM </option>
 <option> 5 AM </option>
 <option> 6 AM </option>
 <option> 7 AM </option>
 <option> 8 AM </option>
 <option> 9 AM </option>
 <option> 10 AM </option>
 <option> 11 AM </option>
 <option selected> 12 Noon </option>
 <option> 1 PM </option>
 <option> 2 PM </option>
 <option> 3 PM </option>
 <option> 4 PM </option>
 <option> 5 PM </option>
 <option> 6 PM </option>
 <option> 7 PM </option>
 <option> 8 PM </option>
 <option> 9 PM </option>
 <option> 10 PM </option>
 <option> 11 PM </option>
 </select>
 &nbsp
 <select name='lunchOutMin'>
 <option> Min </option>
 <option> 00 </option>
 <option> 05 </option>
 <option> 10 </option>
 <option> 15 </option>
 <option> 20 </option>
 <option> 25 </option>
 <option selected> 30 </option>
 <option> 35 </option>
 <option> 40 </option>
 <option> 45 </option>
 <option> 50 </option>
 <option> 55 </option>
 </select>
 <br>
 Lunch In:
 <select name='lunchInHr'>
 <option> Hour </option>
 <option> 12 Midnight </option>
 <option> 1 AM </option>
 <option> 2 AM </option>
 <option> 3 AM </option>
 <option> 4 AM </option>
 <option> 5 AM </option>
 <option> 6 AM </option>
 <option> 7 AM </option>
 <option> 8 AM </option>
 <option> 9 AM </option>
 <option> 10 AM </option>
 <option> 11 AM </option>
 <option> 12 Noon </option>
 <option selected> 1 PM </option>
 <option> 2 PM </option>
 <option> 3 PM </option>
 <option> 4 PM </option>
 <option> 5 PM </option>
 <option> 6 PM </option>
 <option> 7 PM </option>
 <option> 8 PM </option>
 <option> 9 PM </option>
 <option> 10 PM </option>
 <option> 11 PM </option>
 </select>
 &nbsp
 <select name='lunchInMin'>
 <option> Min </option>
 <option> 00 </option>
 <option selected> 05 </option>
 <option> 10 </option>
 <option> 15 </option>
 <option> 20 </option>
 <option> 25 </option>
 <option> 30 </option>
 <option> 35 </option>
 <option> 40 </option>
 <option> 45 </option>
 <option> 50 </option>
 <option> 55 </option>
 </select>
 <br>
 Clock Out:
 <select name='outHr'>
 <option> Hour </option>
 <option> 12 Midnight </option>
 <option> 1 AM </option>
 <option> 2 AM </option>
 <option> 3 AM </option>
 <option> 4 AM </option>
 <option> 5 AM </option>
 <option> 6 AM </option>
 <option> 7 AM </option>
 <option> 8 AM </option>
 <option> 9 AM </option>
 <option> 10 AM </option>
 <option> 11 AM </option>
 <option> 12 Noon </option>
 <option> 1 PM </option>
 <option> 2 PM </option>
 <option> 3 PM </option>
 <option> 4 PM </option>
 <option> 5 PM </option>
 <option selected> 6 PM </option>
 <option> 7 PM </option>
 <option> 8 PM </option>
 <option> 9 PM </option>
 <option> 10 PM </option>
 <option> 11 PM </option>
 </select>
 &nbsp
 <select name='outMin'>
 <option> Min </option>
 <option> 00 </option>
 <option > 05 </option>
 <option> 10 </option>
 <option> 15 </option>
 <option> 20 </option>
 <option> 25 </option>
 <option> 30 </option>
 <option> 35 </option>
 <option selected> 40 </option>
 <option> 45 </option>
 <option> 50 </option>
 <option> 55 </option>
 </select>
 <br><br>
 Time Worked: <input type='text' name='timeWorked' size='5' readonly>
 <br><br>
 <input type='button' value="Calculate" onclick="calc(this.form)">
 </form>
 </body>
 </html>[/CODE]

@bluecaterpillarauthorApr 18.2006 — #Here he comes to my rescue once more. What would I do without you?

Thanks!

Rebecca

@DARTHTAMPONApr 18.2006 — #The only problem with this script is that it allows the user to choose what time they clock in. So if I worked here and came in at 9am but was suppost to work ate 8am I could still say that I came in at 8. The date stamping needs to be as inaccessable as possable to the user so that they cannot cheat the system.

@bluecaterpillarauthorApr 18.2006 — #The thing with this is, he can choose the time from a drop-down menu.

The point is that the kid shows up to open the store and he's the only one there, so if he's two minutes late or an hour late or whatever, we don't want him to be able to choose the time - we want him to be able to print something out that says the time when he came in.

Also, clocking in and out for lunch, and clocking out at the end of the day aren't necessary. We just need to enforce when he gets there in the mornings.

@James_GatkaApr 18.2006 — #You're welcome, Rebecca. I hope you can adapt it for your situation.

@bluecaterpillarauthorApr 18.2006 — #Yes, exactly Darth - if it helps, this young man is neither computer-savvy or sneaky enough to try to change the computer's clock.

He really is a very good kid and honest. Just 21 years old and has frequent morning hangovers.

@bluecaterpillarauthorApr 18.2006 — #So like, just something that said

On (Date), Bobby came in at (time).

That he could print out, maybe? Would that do it? Hmm...

@DARTHTAMPONApr 18.2006 — #

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 
 alert (Date("month day, year hours:minutes:seconds"));
 document.timeclock.time.value = Date("month day, year hours:minutes:seconds");
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form name=timeclock onsubmit="this.html" method=get&gt;
 &lt;input type=hidden name=time&gt;
 &lt;input type=text name=name&gt;
 &lt;input type=submit&gt;
 
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

This will give you the date and time. The only problem is that the javascript is not rewriting the inner html into the form. I do not know javascript well enough to figure out why this is not doing what it should but some one on here should be able to fix this problem quickly.

@CharlesApr 18.2006 — #Easily done and it would take but a few lines of JavaScript, half a dozen at most.

Confronted with such a thing I would, myself, just reset the computer's time clock each time I was late for work.

@bluecaterpillarauthorApr 18.2006 — #Charles, lucky for us, this young man is neither as clever nor as sneaky as you!

So, are you in the mood to be more specific about those few lines of Javascript?

? Rebecca

@DARTHTAMPONApr 18.2006 — #<html>

<head>

</head>

<body>

<form name=timeclock onsubmit="this.html" method=get> <!-- change "onsubmit=this.html" to your serevr side script. I named the page I had on the code to go to itself just so I could see what was happening

<input type=hidden name=time>

<input type=text name=name>

<input type=submit>

</form>

<script type="text/javascript"> //start your script

alert (Date("month day, year hours:minutes:seconds")); //send a message to the screen that says the date time used for testing

document.timeclock.time.value = Date("month day, year hours:minutes:seconds"); //set time (the hidden field in the html to what ever the date vaue returns. Warning does not work not sure how to fix

</script>

</body>

</html>

Ok this fixed the problem. I was trying to set a field befor it existed. BUt this will send the name the user types in and the current date on page load to the server side where you can deal with it however you want.

copy the code into notepad and save it as html to see what it actully does.

@bluecaterpillarauthorApr 18.2006 — #Am trying it now. Thanks!

@slaughtersApr 18.2006 — #You guys may be over complicating this.

Why not just a simple link with a "mailto" in the href so an e-mail is sent to your husbands e-mail address?
[CODE]<a href="mailto:[email protected]?subject=Clocked In&body=I'm here today boss">Clock in</a>[/CODE]The email would contain the current time and your husband would have a continual record of when the employee came in.

@bluecaterpillarauthorApr 18.2006 — #It's so crazy it just might work!

Good idea. I'll do it.

@James_GatkaApr 18.2006 — #

[CODE]<?php
 $localOffset = 2;  // local time is 2 hours later than server time
 $adjDT  = mktime(date('H')+$localOffset, date('i'), date('s'), date("m"), date("d"), date("Y"));
 $localTime = date('g:i A ', $adjDT);
 $localDate =  date("m/d/Y", $adjDT);
 $to = "me@localhost";
 $headers = "From: Employeen"; 

 $headers .= "Content-Type: text/plain; charset=iso-8859-1n";
 $subj = "Time Arrived";
 $details = "The employee arrived at " . $localTime . "on " . $localDate;
 mail($to,$subj,$details,$headers);
 echo "<h2><font color=red>Thank you. Your arrival time has been recorded.</font></h2>";
 ?>
 
 <html>
 <head>
 <title> Sign-in Time </title>
 </head>
 <body>
 
 
 
 </body>
 </html>[/CODE]

@bluecaterpillarauthorApr 19.2006 — #I just did the mailto link because it was easy. Tried James' php code but not sure how it's supposed to work... but James knows me and php. I require lots of hand-holding.

The mailto link is perfect for what we need. A click on a desktop shortcut, a click on my nifty "Clock In" graphic, a click on the "send" button. Foolproof, and no paper to print and keep track of.

Thanks for your help guys!

@neomaximus2kApr 19.2006 — #Perhaps Php would have been a better choice for this, give everyone a barcode ID could be on paper then they swipe that in and the server does the rest.

Ignore that, didnt notice someone had suggested it already

Also in #JavaScript _↴

Multiple OnLoad Functions Different HRef's on item Beginner - Manual slideshow problem

Success!

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

Tweet This

Any ideas for a time clock?

18 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Any ideas for a time clock?

18 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

18 Comments(s) _↴

Also in #JavaScript _↴