Question

I have a text box at top which displays the total duration. Now what happens is the user selects a duration from a timepicker and this will be displayed in the textbox and then add it into a new row.
Now the situation I have is that the format of the textbox is like this “00 Hrs 00 Mins 00 Secs”.

So for example if the total duration was 00 Hrs 30 Mins 00 Secs and if you select 00 Hrs 20 Mins 00 Secs from the timeicker (displayed in the textbox) and then add it into a new row, then 00 Hrs 30 Mins 00 Secs should minus 00 Hrs 20 Mins 00 Secs to make 00 Hrs 10 Mins 00 Secs.

The thing is that I know how to do the calculation but I do not how to match it with in the 00 Hrs 00 Mins 00 Secs format. My calculation works for a normal number format but how can I get it working with this format?

    Below is my jquery code which does the calculation:

var duration = '<?php echo $_POST['durationChosen']; ?>'

        $("#qandatbl td.duration input").live("change", function(){
            calculateDuration();
        });

        function calculateDuration()
        {
           var totalduration = duration;  
    //duration is the variable which displays total duration e.g 00 Hrs 30 Mins 00 Secs
           $("#qandatbl td.duration input").each(function (i, elm){
                totalduration = totalduration - parseInt($(elm).val(), 10);
            });

            $("#total-duration").text(totalduration);
        }

Below is html code:

    <table id="questionDuration">
    <tr>
         <th colspan="2">
         Question Duration
         </th>
    </tr>
    <tr>
    <td><input type="text" id="questiondurationpicker" name="questionDuration" readonly="readonly" /></td>
    // timepicker textbox for duration
    </tr>
    <tr>
    <td>Total Duration Remaining: <span id="total-duration"></span></td>
    this is where the total duration is displayed
    </tr>
    </table>


    <table id="qandatbl" border="1">
    <tr>
        <th class="duration">Question Duration</th>
    </tr>
    </table>

    // above is where the duration selected is stored in a new row

Answer 1

---

EDIT:

---

Look at this fiddle.

http://jsfiddle.net/pixelass/URLR5/15/

http://jsfiddle.net/pixelass/URLR5/16/ (faster version)

http://jsfiddle.net/pixelass/URLR5/17/ (force two digits e.g 9 = 09)

HTML

current Time: <span id="currentTime">25 Hrs 24 Mins 45 Secs</span>
<hr>
subtract Time: <span id="minusThis">07 Hrs 15 Mins 21 Secs</span>
<hr>
new Time: <span id="newTime"></span>
<hr>

<button>subtract the time</button>

jQuery

var minusThis = $('#minusThis').text(),
    date = minusThis.match(/(\d\d)/ig),
    currentTime = $('#currentTime').text(),
    newDate = currentTime.match(/(\d\d)/ig),
    newsetH = parseInt(date[0], 10),
    newsetM = parseInt(date[1], 10),
    newsetS = parseInt(date[2], 10),
    hours = parseInt(newDate[0], 10),
    mins = parseInt(newDate[1], 10),
    secs = parseInt(newDate[2], 10);


function calculate() {
    newH = hours - newsetH;
    newM = mins - newsetM;
    newS = secs - newsetS;
    $('#newTime').text(newH + ' Hrs ' + newM + ' Mins ' + newS + ' Secs');
}

$('button').on('click', calculate);