Time difference inside table cell using javascript

Question

I have created a javascript that will display start and stop time when the user choose the option from dropdown menu, please some one help me how to calculate the time difference of stop and start time.

here is below code

<script>
var myTime = new Date().toLocaleString(navigator.language, {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});


function getValue(data) {



  var selectedText = $("#ddselect").find("option:selected").text();
  if (selectedText != "None") {



    var display = document.getElementById("display");
    var newRow = display.insertRow(display.rows.length);

    var cell1 = newRow.insertCell(0);
    cell1.innerHTML = myTime;

    var cell2 = newRow.insertCell(1);
    cell2.innerHTML = selectedText;

    /* stop time */
    var stopTime = new Date().toLocaleString(navigator.language, {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });

    var cell3 = newRow.insertCell(2);
    cell3.innerHTML = stopTime;

    var cell4 = newRow.insertCell(3);
    cell4.innerHTML = stopTime - myTime;

  }

}
</script>

Here exists lot of questions and answers for time calculation. Have you done some research? — Reporter, Nov 20 '19 at 12:01
Does this answer your question? [How do you get a timestamp in JavaScript?](https://stackoverflow.com/questions/221294/how-do-you-get-a-timestamp-in-javascript) — Chris, Nov 20 '19 at 12:29

score 0 · Answer 1 · answered Nov 20 '19 at 12:03

0

One way would be to use getTime().

cell4.innerHTML = new Date(stopTime.getTime() - myTime.getTime()); Should do the trick.

A more complete solution (for a larger application) would be to use a lib such as momentJS.

answered Nov 20 '19 at 12:03

Edd

42
4

score 0 · Answer 2 · answered Nov 20 '19 at 12:04

You need to calculate duration of time span between start and stop. Well just use moment, I guess:

const duration = moment.duration(new Date(stop) - new Date(start));
const hours = parseInt(duration.asHours(), 10);
const minutes = parseInt(duration.clone().subtract(hours, 'hours')).asMinutes(), 10);
const seconds = parseInt(duration.clone().subtract(hours, 'hours').subtract(minutes, 'minutes').asSeconds(), 10);
const result = `${hours}:${minutes}:${seconds}`;

score 0 · Answer 3 · answered Dec 04 '19 at 12:25

I found the solution guys. Thanks for the support

var myTime  = new Date().toLocaleString(navigator.language,
{hour: '2-digit', minute: '2-digit', second: '2-digit'});


function getValue(data)
{
        var selectedText = $("#ddselect").find("option:selected").text();
        if(selectedText!="None"){
        
        var display = document.getElementById("display");
        var newRow = display.insertRow(display.rows.length); 
        
        var cell1 = newRow.insertCell(0);
        cell1.innerHTML = myTime;
        
        var cell2 = newRow.insertCell(1);
        cell2.innerHTML = selectedText;

/* stop time */
        var stopTime = new Date().toLocaleString(navigator.language,
        {hour: '2-digit', minute: '2-digit', second: '2-digit'});
        
        var cell3 = newRow.insertCell(2);
        cell3.innerHTML = stopTime;
  
      var timeDifference = timediff(myTime,stopTime);
        var cell4 = newRow.insertCell(3);
        cell4.innerHTML = timeDifference;
}
}

function timeobject(t){
     a = t.replace('AM','').replace('PM','').split(':');
     h = parseInt(a[0]);
     m = parseInt(a[1]);
     s = parseInt(a[2]);
     ampm = (t.indexOf('AM') !== -1 ) ? 'AM' : 'PM';
     return {hour:h,minute:m,seconds:s,ampm:ampm};
}

function timediff(start,end){ 
     start = timeobject(start);
     end = timeobject(end);
     end.hour = (end.ampm === 'PM' &&  start.ampm !== 'PM' && end.hour < 12) ? end.hour + 12 : end.hour;
     hourDiff = Math.abs(end.hour-start.hour);
     minuteDiff = end.minute - start.minute;
     secondDiff = end.seconds - start.seconds;

     if(minuteDiff < 0){
    minuteDiff = Math.abs(60 + minuteDiff);
    hourDiff = hourDiff - 1;
     }
    if(secondDiff < 0){
    secondDiff = Math.abs(60 + secondDiff);
    minuteDiff = minuteDiff - 1;
     }
     var totDiff = hourDiff+'hr '+ Math.abs(minuteDiff)+"min " + Math.abs(secondDiff) +"sec";
     return totDiff;
   }

<!DOCTYPE html>
<html>
<body>
<select id="ddselect" onchange="getValue()">
  <option value="">None</option>
  <option value="1">Initial</option>
  <option value="2">Revision</option>
  <option value="3">Final</option>
</select>

<table id="display" border="1">
  <tr>
    <th>Start Time</th>
    <th>Activity</th>
    <th>Stop Time</th>
     <th>Time Taken</th>
   </tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>

Time difference inside table cell using javascript

3 Answers3