title: Hour Minutes formatting using jquery/ javascript
body: <p>Hi I'm trying to work with time but unable to do so.</p>
  
  <p>I have a text field where I'm getting the time by default. When the user alters the time I'm running jquery change event to check the time values. If the hours and minutes are within the permissible range. </p>
  
  <p>Everything is working fine. <strong>But when the user inputs 60 for minutes I am not able to add +1 to hours. For ex: if user inputs 10:60 then time should change to 11:00 which I'm not getting instead its giving 101:00</strong>. </p>
  
  <p><strong><em>I got it solved. I forgot to change the format to parseInt(). Once adding that solved my issue.</em></strong></p>
  
  <p>For your consideration, I'm adding a snippet.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var currentdate = new Date();
    var datetime = currentdate.getHours() + ":" + currentdate.getMinutes();
    //console.log(datetime);
    $("#test").val(datetime);
  
    $("#test").change(function() {
  
      var time = $("#test").val();
      var patt = /^[0-9:]{1,5}$/igm;
      var res = patt.test(time);
      if (res === true) {
  
        if ($(this).val().length &lt; 3) {
          alert('Invalid Time Format');
  
        } else {
          var arr = time.split(":");
          MyDateString = ('0' + arr[0]).slice(-2) + ":" + ('0' + arr[1]).slice(-2);
          $('#test').val(MyDateString);
          if (arr[1] == 60) {
            if (arr[0] == 24) {
              $('#test').val(function(index, value) {
                return value.replace('24', '01');
              });
              $('#test').val(function(index, value) {
                return value.replace('60', '00');
              });
            } else if (arr[0] &gt; 24) {
              alert('Time is invalid');
            } else {
              $('#test').val(function(index, value) {
                console.log(value);
                var arr = time.split(":");
                var val = arr[0] + 1;
                console.log(val);
                return value.replace(arr[0], parseInt(arr[0]) + 1);
              });
              $('#test').val(function(index, value) {
                return value.replace('60', '00');
              });
            }
          } else if (arr[1] &lt; 60) {
            if (arr[0] == 24) {
              $('#test').val(function(index, value) {
                return value.replace('24', '00');
              });
            }
          } else {
            alert('Time is invalid');
  
          }
        }
      } else {
        alert('Invalid Time Format');
  
      }
  
    });
  
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="test" id="test" value="Hello" /&gt;</code></pre>
  </div>
  </div>
  </p>