javascript - 为 24 格式 jq 制作输入类型时间

Question

我正在尝试制作一些线条，但采用 24 格式而不是 12 格式，所以当我单击向上和向下时调用 inc() 函数并向下调用 dec() 函数时，我制作了带有 2 个上下箭头的输入字段但我的问题是这些函数 inc 和 dec hours 我怎样才能做一些让这个持续数小时和数分钟的东西。

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 与 custom format 一起使用是合理的.在下面的示例中，我使用了小时、分钟和秒组件。但是如果你只需要显示小时和分钟，那么你可以使用'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 documentation 中.