Question

I have looked everywhere and I could not find a script that would do this. Anyway I have two buttons +/- and they should either add or subtract minutes that are in a input field. I tried to do it with jQuery but it does not work right.. If somebody could point me into the right direction.

HMTL:

<a href="#" class="btn" onclick="SubTime('#input-time')"><h1>&nbsp;<i class="icon-minus"></i>&nbsp;</h1></a>
<a href="#" class="btn"><h1>&nbsp;<input type="text" value="0:50" id="input-time">&nbsp;</h1></a>
<a href="#" class="btn" onclick="AddTime('#input-time')"><h1>&nbsp;<i class="icon-plus"></i>&nbsp;</h1></a>

jQuery (added only the function that should add time):

function AddTime(where) {
 var oldTime = $(where).val();
 var contains = oldTime.split(":");
 var hours = parseInt(contains[0], 10);
 var minutes = parseInt(contains[1], 10);
 var j = 1;

if (minutes == 0) {
    return false;
}

if (minutes > 0 && minutes < 11) {
    var value = minutes + j;
    value = hours + ':0' + value;
    $(where).val(value);
}

if (minutes > 10) {
    var value = minutes + j;
    value = hours + ':' + value;
    $(where).val(value);
}

if (minutes > 58) {
    hours = hours + 1;
    var value = hours + ':0' + j;
    $(where).val(value);
}
}

It does not add the hours right, right now the input field value is 0:50 so when I start pushing + button it adds one minute at a time as long as the time is 1:01 and then the hour goes back to 0:02. I don’t know how to add the hours right, I’ll bet there is an easier way of doing this, so please help.

Answer 1

So first things first, you shouldn’t really be using inline event handlers to bind events to dom elements, use jQuery on() instead. Secondly, in a case like this it’s much easier to track minutes in your logic and then format that value into hours and minutes for display:

html:

<a href="#" class="btn btn-subtract">subtract</a>
<input type="text" value="1:50" id="input-time" data-minutes="110"/>
<a href="#" class="btn btn-add">add</a>

JS (assumes jQuery 1.8+):

  $(function() {// on document ready
    var $input = $('#input-time');//cache the input as a jQuery object (optional)
    //bind events to the buttons
    $('.btn-add').on('click', function(){
      changeTime(1);
    });
    $('.btn-subtract').on('click', function(){
      changeTime(-1);
    });

    function changeTime(mins){
      var currentTime = parseInt($input.data('minutes')), //get the current value from the data attr in the HTML
          newTime = currentTime + mins, //calculate the new time
          minutes = (newTime % 60).toString(), //get the minutes using the modulus operator and convert to a string (so we can use length below)
          hours = (Math.floor(newTime / 60)).toString();// get the hours and convert to a string

      //make sure we've got the right length for the minutes string
      if (minutes.length === 0){
        minutes = "00";
      }
      else if(minutes.length === 1){
        minutes = "0" + minutes;
      }
      //update the data attr and the displayed output
      $input.data('minutes', newTime).val(hours + ":" + minutes);

    }
  });

(also, check your html structure: you had a h1 around your input element, which is a bit odd, and a linka round that too. is that really what you meant to do?)

Update

If you aren’t able to set a data attribute with the minutes in your html, you can set it with jQuery like this:

//before you bind your events
$input.data('minutes', parseTimeString($input.val()));

function parseTimeString(str){
  var time = str.split(":");
  return (parseInt(time[0])*60) + parseInt(time[1]);
}