CODEWITHSUNDEEP
javascripttime
imrolling
imrolling

Reputation: 9

calculate difference in 2 given time in javascript

I have 2 times in dropdown in below format

Sun: Start Time::
<select name="timestart" size="1">
    <option value="08:00:00">08:00</option>
    <option value="08:30:00">08:30</option>
    <option value="09:00:00">09:00</option>
    <option value="09:30:00">09:30</option>
    <option value="10:00:00">10:00</option>
    <option value="10:30:00">10:30</option>
    <option value="11:00:00">11:00</option>
    <option value="11:30:00">11:30</option>
    <option value="12:00:00">12:00</option>
    <option value="12:30:00">12:30</option>
    <option value="13:00:00">13:00</option>
    <option value="13:30:00">13:30</option>
    <option value="14:00:00">14:00</option>
    <option value="14:30:00">14:30</option>
    <option value="15:00:00">15:00</option>
    <option value="15:30:00">15:30</option>
    <option value="16:00:00">16:00</option>
    <option value="16:30:00">16:30</option>
    <option value="17:00:00">17:00</option>
 </select><br />

And

Sun: End Time::
<select name="timestop" size="1">
    <option value="08:00:00">08:00</option>
    <option value="08:30:00">08:30</option>
    <option value="09:00:00">09:00</option>
    <option value="09:30:00">09:30</option>
    <option value="10:00:00">10:00</option>
    <option value="10:30:00">10:30</option>
    <option value="11:00:00">11:00</option>
    <option value="11:30:00">11:30</option>
    <option value="12:00:00">12:00</option>
    <option value="12:30:00">12:30</option>
    <option value="13:00:00">13:00</option>
    <option value="13:30:00">13:30</option>
    <option value="14:00:00">14:00</option>
    <option value="14:30:00">14:30</option>
    <option value="15:00:00">15:00</option>
    <option value="15:30:00">15:30</option>
    <option value="16:00:00">16:00</option>
    <option value="16:30:00">16:30</option>
    <option value="17:00:00">17:00</option>
 </select><br />

I am trying to show time difference in another input box this one

SunTotal:<input maxlength="255" id="sunvalue" name="inp_24771" type="text" value=""  /><br />

and I am using below javascript

<script>


 $(document).ready(function() {    
    function calculateTime() {

        var  hourDiff = parseInt($("select[name='timestart']").val().split(':')[0],10) - parseInt($("select[name='timestop']").val().split(':')[0],10);

         document.getElementById('sunvalue').value = hourDiff;


    }
    $("select").change(calculateTime);
    calculateTime();
    });


</script>

The problem is the code is working half, means it is showing time only when I select hours in both fields like this 09:00 and 10:00 but when I select time in minutes like 09:30 and 10:30, it does not work

Upvotes: 0

Views: 69

Answers (1)

derp
derp

Reputation: 2318

You haven't parsed the minutes sections. What you need to do is grab the minutes, convert them into hours (e.g. 30 is 0.5 hours) and then do the calculation.

JSfiddle attached below https://jsfiddle.net/1r6yykmv/

function parseTime(timeString){
    var timeSections = timeString.split(':');
    var hours = timeSections[0];
    var minutes = timeSections[1];

    var timeInHours = parseFloat(hours) + parseFloat(minutes / 60);
    return timeInHours;
}

Upvotes: 1

Related Questions