Subtract time classify if the difference is minutes

Question

Hi I'm subtracting 2 values on input types and display the difference on one input type.

This is my code

<div class="col-xs-6 col-md-6">
                                    <label for="date" style="font-size: 16px;">Start Time:</label>
                                    <div class="input-group clockpicker"  data-align="top" data-autoclose="true">
                                      <div class="input-group-addon">
                                       <i class="glyphicon glyphicon-time">
                                       </i>
                                     </div>

                                     <input class="form-control" id="startTime" autocomplete="off" placeholder="Choose time here..." name="startTime" type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
                                   </div>
                                 </div>

                                 <div class="col-xs-6 col-md-6">
                                  <label for="date" style="font-size: 16px;">End Time:</label>
                                  <div class="input-group clockpicker"  data-align="top" data-autoclose="true">
                                    <div class="input-group-addon">
                                     <i class="glyphicon glyphicon-time">
                                     </i>
                                   </div>

                                   <input class="form-control" id="endTime" autocomplete="off" placeholder="Choose time here..." name="endTime" type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
                                 </div><br>
                               </div>

                               <div class="col-xs-6 col-md-7">
                                <label for="date" style="font-size: 16px;">Hours Rendered:</label>
                                <div class="input-group"  data-align="top" data-autoclose="true">
                                  <div class="input-group-addon">
                                   <i class="glyphicon glyphicon-time">
                                   </i>
                                 </div>

If you see my code I use clockpicker on my first 2 input types to have value so the output of the value is like this "7:00" .

Now I successfully subtract the code by using this jquery code below .

function calculateTime() {
    // Get values.
    var valuestart = $("#startTime").val();
    var valuestop = $("#endTime").val();

    // Create date format.          
    var timeStart = new Date("01/01/2007 " + valuestart);
    var timeEnd = new Date("01/01/2007 " + valuestop);

    // Subtract.
    var difference = timeEnd - timeStart;

    var time = msToTime(difference);
     $("#ren").val(time);

}

function msToTime(s) {
    var ms = s % 1000;
    s = (s - ms) / 1000;
    var secs = s % 60;
    s = (s - secs) / 60;
    var mins = s % 60;
    var hrs = (s - mins) / 60;

    return hrs + ':' + mins;
}

$("#startTime, #endTime").change(calculateTime);

What I want to happen is if the difference is in hour like "2:00" it displays like "2:00 hours" then when the difference between the time is minute it displays like "00:06 minutes" . How can I achieved that? Please help me. Thank you in advance.

Answer 1

below code should work :-

 function msToTime(s) {
        var ms = s % 1000;
        s = (s - ms) / 1000;
        var secs = s % 60;
        s = (s - secs) / 60;
        var mins = s % 60;
        var hrs = (s - mins) / 60;
        var str = ' Hours';
        if(hrs===0){str=' Mins';}
        return hrs + ':' + mins + str;
    }