使输入类型时间为24格式jq

Question

我正在尝试制作一些行,但是24格式而不是12格式所以当我点击向上调用inc()函数时调用输入字段2向上和向下调用dec()函数调用但是我的问题是这些功能inc和dec小时我怎样才能制作能够持续数小时和分钟的东西.

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;
  }

}

<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>

Answer 1

你使用Bootstrap和jQuery.因此,使用自定义格式的 Bootstrap Datepicker是合理的.在以下示例中,我使用小时,分钟和秒组件.但是,如果您只需要显示小时和分钟,那么您可以使用'HH:mm'格式值.

$('[name="time"]').datetimepicker({
  format:'HH:mm:ss'
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="col-md-12 col-sm-12 timer-container">
  <div class="form-group">
    <div class="input-group date">
      <input class="form-control required" type="text" name="time" value="23:06:35" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
      </span>
    </div>
  </div>
</div>

所有可能的格式值都列在momentjs文档中.