title: Manually set time on timer built with JS
body: <p>I have a timer I am using for time tracking.  The timer works great when I click Start or Stop.  Now I am trying to allow for the user to click on the <code>#time</code> tag to manually edit the time.  Once they edit the time manually by clicking on the timer and click start it should start from that "time" and when they click stop it should update the hidden <code>input#counter</code> tag to convert that into milliseconds.</p>
  
  <p><em>My Question is how do I allow the user to edit the time manually so when they click start/stop the timer works as expected based on the new time? For example, if I double click on the time and make it 10:00:00 and press start it should start from 10:00:00, otherwise it is updating the hidden input so when I click submit it saves the updated time</em></p>
  
  <p>Here is the fiddle: <a href="https://jsfiddle.net/4pu3x62g/" rel="nofollow">https://jsfiddle.net/4pu3x62g/</a></p>
  
  <p><strong>Here is the HTML:</strong></p>
  
  <pre><code>&lt;div class="form-group timer"&gt;
      &lt;span id="time"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-sm-6 col-xs-6"&gt;
          &lt;input class="btn btn-success col-md-12 col-sm-12 col-xs-12" type="button" value="start" onclick="start();"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-6 col-sm-12 col-xs-6"&gt;
          &lt;input class="btn btn-danger col-md-12 col-sm-12 col-xs-12" type="button" value="stop" onclick="stop();"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;input type="hidden" value="" id="counter" name="counter" /&gt;
  </code></pre>
  
  <p><strong>Here is the Timer JS</strong></p>
  
  <pre><code>var clsStopwatch = function () {
  
    var startAt = 0;
    var lapTime = 0;
  
    var now = function () {
        return (new Date()).getTime();
    };
  
    this.start = function () {
        startAt = startAt ? startAt : now();
    };
  
    this.stop = function () {
        lapTime = startAt ? lapTime + now() - startAt : lapTime;
        startAt = 0;
    };
  
    this.time = function () {
        return lapTime + (startAt ? now() - startAt : 0);
    };
  };
  
  var x = new clsStopwatch();
  var $time;
  var clocktimer;
  
  function pad(num, size) {
    var s = "0000" + num;
    return s.substr(s.length - size);
  }
  
  function formatTime(time) {
    var h = m = s = ms = 0;
    var newTime = '';
  
    h = Math.floor(time / (3600 * 1000));
    time = time % (3600 * 1000);
    m = Math.floor(time / (60 * 1000));
    time = time % (60 * 1000);
    s = Math.floor(time / 1000);
    ms = time % 1000;
  
    newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2);
    //newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 2);
    return newTime;
  }
  
  function show() {
      $time = document.getElementById('time');
      update();
  }
  
  function update() {
      $time.innerHTML = formatTime(x.time());
  }
  
  function start() {
    clocktimer = setInterval("update()", 1);
    x.start();
  }
  
  function millisecondsToHours(amountMS) {
    return amountMS / 3600000;
  }
  
  function stop() {
    x.stop();
    document.getElementById('counter').value = millisecondsToHours(x.time());
    clearInterval(clocktimer);
  }
  </code></pre>
  
  <p><strong>Here is the plugin to make the span#time editable:</strong></p>
  
  <pre><code>//plugin to make any element text editable
  $.fn.extend({
      editable: function () {
          $(this).each(function () {
              var $el = $(this),
              $edittextbox = $('&lt;input type="text"&gt;&lt;/input&gt;').css('min-width', $el.width()),
              submitChanges = function () {
                  if ($edittextbox.val() !== '') {
                      $el.html($edittextbox.val());
                      $el.show();
                      $el.trigger('editsubmit', [$el.html()]);
                      $(document).unbind('click', submitChanges);
                      $edittextbox.detach();
                  }
              },
              tempVal;
              $edittextbox.click(function (event) {
                  event.stopPropagation();
              });
  
              $el.dblclick(function (e) {
                  tempVal = $el.html();
                  $edittextbox.val(tempVal).insertBefore(this)
                  .bind('keypress', function (e) {
                      var code = (e.keyCode ? e.keyCode : e.which);
                      if (code == 13) {
                          submitChanges();
                      }
                  }).select();
                  $el.hide();
                  $(document).click(submitChanges);
              });
          });
          return this;
      }
  });
  </code></pre>
  
  <p><strong>Here is where the event fires:</strong></p>
  
  <pre><code>//implement editable plugin
  $('span#time').editable().on('editsubmit', function (event, val) {
      //Need to trigger the timer with the new val from here
  
  });
  </code></pre>