...

View Full Version : Difference in Time



SonicBoomAu
06-19-2008, 06:43 AM
Hi All,

I am extremely new to Java programming and HTML, so be gentle =P

I have a form where the user can select a start and finish time.

HTML code


<input type="text" id="startTime" name="startTime" /><a href="javascript:getTime('startTime')><img></img></a>

<input type="text" id="finishTime" name="finishTime" /><a href="javascript:getTime('finishTime')><img></img></a>

Java code


function getTime(pElem){
myDate = new Date();

hours = myDate.getHours();
minutes = myDate.getMinutes();

document.getElementById(pElem).value = hours+":"+minutes;


What I am after is help with finding out the difference between these to values.

My HTML code so far


<input type="text" id="totalTime" name="totalTime" /><a href="javascript:timeDiff('totalTime')><img></img></a>


I have tried a couple of different things for the Java but to no avail.

All help is extremely welcome.

SBA

rangana
06-19-2008, 08:31 AM
Let me answer this by stating that Java is different from Javascript (http://en.wikipedia.org/wiki/JavaScript).

First mistake is this typo, which goes on all your inline event handler (onclick):


<a href="javascript:getTime('startTime')">


See if this code helps:


<script type="text/javascript">
var startTimeH,startTimeM,finishTimeH,finishTimeM;
function getTime(pElem)
{
var myDate = new Date(),
hours = myDate.getHours(),
minutes = myDate.getMinutes();
document.getElementById(pElem).value = hours+":"+minutes;
if(pElem=='startTime')
{
startTimeH=hours;
startTimeM=minutes;
}
else if(pElem=='finishTime')
{
finishTimeH=hours;
finishTimeM=minutes;
}
}
function timeDiff(test)
{
var iSSeconds = (startTimeH*3600)+(startTimeM*60),
iESeconds = (finishTimeH*3600)+(finishTimeM*60),
iDif = (iESeconds-iSSeconds)/60,
filtH=parseInt(iDif/60),
filtS=parseInt(iDif&#37;60);
document.getElementById(test).value = filtH +':'+filtS;
}
</script>

Philip M
06-19-2008, 08:34 AM
As rangana says, Java and Javascript are entirely different programming languages, in spite of the confusingly similar names.

I am not clear whether your form already validates the times entered, but this is a complete solution:-


<form name = "myform">
Enter the start time in HH:MM format <input type="text" id="startTime" name="startTime" size = "6" onblur = "chkstart()" ><br>
Enter the finish time in HH:MM format <input type="text" id="finishTime" name="finishTime" size = "6" onblur = "calcDiff()"><br>
Total time:- <input type = "text" id = "timeDiff" name = "timeDiff" size = "6">
</form>

<script type = "text/javascript">

var st;
var stsplt;
var ftsplt;
var passflag;

function chkstart () {
var flag = 0;
st = document.myform.startTime.value;
st = st.replace(/[\.-]/,":"); // allow . or - separator
if (!/\d{1,2}:\d{2}/.test(st)) { // allow 1 or 2 digits in hours, only 2 in minutes
flag ++;
}
stsplt = st.split(":"); // split hours and minutes
stsplt[0] = stsplt[0] * 1; // Make number. parseInt(stsplt[0]) would do same thing
stsplt[1] = stsplt[1] * 1;
if ((stsplt[0] < 0) || (stsplt[0] > 23)) { // valid hour 0-23
flag ++;
}
if ((stsplt[1] < 0) || (stsplt[1] > 59)) { // valid minutes 0-59
flag ++;
}
if (flag > 0) {
alert ("Invalid time - please re-enter! ");
flag = 0; // reset flag
document.myform.startTime.value = ""; // clear the field
document.myform.startTime.focus(); // and focus on it
return false;
}
else {
passflag = 1; // valid start time has been entered
}
}

function calcDiff () {
if (passflag != 1) {
alert ("You must enter a starting time!" );
document.myform.startTime.value = "";
document.myform.startTime.focus();
return false;
}
var flag = 0;
var ft = document.myform.finishTime.value;
ft = ft.replace(/[\.-]/,":");
if (!/\d{1,2}:\d{2}/.test(ft)) {
flag ++;
}
ftsplt = ft.split(":");
ftsplt[0] = ftsplt[0] * 1;
ftsplt[1] = ftsplt[1] * 1;
if ((ftsplt[0] < 0) || (ftsplt[0] > 23)) {
flag ++;
}
if ((ftsplt[1] < 0) || (ftsplt[1] > 59)) {
flag ++;
}
if (ftsplt[0] < stsplt[0]) {
flag ++;
}
if ((ftsplt[0] == stsplt[0]) && (ftsplt[1] > stsplt[1])) {
flag ++;
}

if (flag > 0) {
alert ("Invalid time - please re-enter! ");
flag = 0;
document.myform.finishTime.value = "";
document.myform.finishTime.focus();
return false;
}

var hrsDiff = ftsplt[0] - stsplt[0];
if (ftsplt[1] < stsplt[1]) {
hrsDiff = hrsDiff -1;
}

var minsDiff = ftsplt[1] - stsplt[1];
if (minsDiff < 0) {
minsDiff = 60 + minsDiff;
}
if (minsDiff < 10) {
minsDiff = "0" + minsDiff;
}

var diffTime = hrsDiff + ":" + minsDiff;
document.myform.timeDiff.value = diffTime;

}

</script>



Quizmaster: Three stumps with two bails on top are essential equipment in which sport?
Contestant: Horse racing.

SonicBoomAu
06-19-2008, 11:25 PM
Thats for the help guys and correcting my programming language mistake.

I will try out rangana suggestion and let you know how I go.

Cheers

SonicBoomAu
06-20-2008, 12:07 AM
Have implemented the above suggestion from Rangana, but I end up with a result of NaN:NaN.

What am I doing wrong?

TIA

*EDIT*

For some reason or other the timeDiff function wasn't about to see the startTimeH / FinTimeH / startTimeM / FinTimeM values, to over come this I used the code in the next example.

SonicBoomAu
06-20-2008, 01:07 AM
Hi again Guys,

Thank you both for your time and examples. In the end I used bits and pieces from both of you. The JAVASCRIPT (=P) ended up as follows.


function timeDiff(test)
{
var st = document.review.startTime.value;
var ft = document.review.finTime.value;

// split the values
var stsplt;
var ftsplt;
var startTimeH;
var finTimeH;
var startTimeM;
var finTimeM;

// capture Start Time HH & MM
stsplt = st.split(":");
startTimeH = stsplt[0];
startTimeM = stsplt[1];

// capture Finish Time HH & MM
ftsplt = ft.split(":");
finTimeH = ftsplt[0];
finTimeM = ftsplt[1];

var iSSeconds = (startTimeH*3600)+(startTimeM*60);
iESeconds = (finishTimeH*3600)+(finishTimeM*60);
iDif = (iESeconds-iSSeconds)/60;
filtH=parseInt(iDif/60);
filtS=parseInt(iDif&#37;60);

// Just to display the time in a nice format
if (filtH < 10) filtH= "0" + filtH;
if (filtS< 10) filtS= "0" + filtS;

// Place difference in value box.
document.getElementById(test).value = filtH +':'+filtS;
}


Once again Thank you both for your help.

I hope that in the future this can help someone else.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum