Difference in Time

[SonicBoomAu]

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]

Let me answer this by stating that Java is different from 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%60);
document.getElementById(test).value = filtH +':'+filtS;
}
</script>

[Philip M]

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]

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]

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]

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%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.