i'm trying to make something line but in 24 format not 12 format so i made input field with 2 arrows up and down when i click on up the inc() function is called and down the dec() function is called but my problem is these functions inc and dec hours how can i make something that make this for hours and minutes .

```js
function inc() {
  var admissionTime = $(".add-time").val();
  var hours = parseInt(admissionTime.split(":")[0]); ///before
  var minutes = parseInt(admissionTime.split(":")[1]);
  hours = hours + 1;

  if (hours <= 24) {
    var bb = hours + ':' + minutes;
    $(".add-time").val(bb);
  } else {
    var bb = 00 + ':' + 00;
    $(".add-time").val(bb);
  }
}

function dec() {
  var admissionTime = $(".add-time").val();
  var hours = parseInt(admissionTime.split(":")[0]); ///before
  var minutes = parseInt(admissionTime.split(":")[1]); ///after
  minutes = minutes - 1;
  if (minutes <= 60) {
    $(".add-time").val() = hours + ':' + minutes;
  }

}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-12 col-sm-12 timer-container">
  <label>Time *</label>
  <div class="timer">
    <i class="fa fa-caret-up " id="incease" aria-hidden="true" onclick="inc()">Inc</i>
    <i class="fa fa-caret-down" id="decrease" aria-hidden="true" onclick="dec()">Dec</i>
  </div>
  <input type="text" name="time" value="{{admission.time}}" class="add-time form-control required">
</div>
```