Question

我试图制作一些行，但是24格式而不是12格式，所以当我点击向上调用inc（）函数调用并向下调整dec（）函数时，我使用2个箭头向上和向下输入字段被叫，但我的问题是这些功能inc和dec小时我怎样才能制作能够持续数小时和分钟的功能。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您使用Bootstrap和jQuery。因此，使用带有custom format的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 documentation。

中

Answer 2

你需要两套箭头才能做到这一点，一组用于小时，一组用于分钟这意味着您需要四个事件处理程序，每个箭头一个剩下的就是简单的数学。

由于您的问题不包含太多CSS，我使用它来定位箭头我假设你使用Bootstrap。

// Arrow setup
var timeInput = $(".add-time");
var upHour = timeInput.siblings(".up.hour");
var downHour = timeInput.siblings(".down.hour");
var upMinute = timeInput.siblings(".up.minute");
var downMinute = timeInput.siblings(".down.minute");

var timeInputPos = timeInput.offset();
upHour.css({"top":timeInputPos.top+4,"left":timeInputPos.left+3});
downHour.css({"top":timeInputPos.top+16,"left":timeInputPos.left+3});
upMinute.css({"top":timeInputPos.top+4,"left":timeInputPos.left+56});
downMinute.css({"top":timeInputPos.top+16,"left":timeInputPos.left+56});

// TIME
var actualTime = timeInput.val();
var actualHour = parseInt(actualTime.split(":")[0]);
var actualMinute = parseInt(actualTime.split(":")[1]);

// Handlers
upHour.on("click",function(){
  actualHour++;
  if(actualHour>23){
    actualHour=0;
  }
  updateTime();
});
downHour.on("click",function(){
  actualHour--;
  if(actualHour<0){
    actualHour=23;
  }
  updateTime();
});
upMinute.on("click",function(){
  actualMinute++;
  if(actualMinute>59){
    actualMinute=0;
  }
  updateTime();
});
downMinute.on("click",function(){
  actualMinute--;
  if(actualMinute<0){
    actualMinute=59;
  }
  updateTime();
});

function updateTime(){
  var prefixMinute="";
  var prefixHour="";
  if(actualHour<10){
    prefixHour="  ";
  }
  if(actualMinute<10){
    prefixMinute="0";
  }
  timeInput.val(prefixHour+actualHour+":"+prefixMinute+actualMinute);
}

.add-time{
  width:4.3em !important;
  cursor:initial !important;
}
.up,.down{
  position:absolute;
  z-index:2;
  cursor:pointer !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="col-md-12 col-sm-12 timer-container">
  <label>Time *</label>
  <div class="timer">
    <i class="fa fa-caret-up up hour" aria-hidden="true"></i>
    <i class="fa fa-caret-down down hour" aria-hidden="true"></i>
    
    <i class="fa fa-caret-up up minute" aria-hidden="true"></i>
    <i class="fa fa-caret-down down minute" aria-hidden="true"></i>
    
    <input type="text" name="time" value="13:00" class="add-time form-control required" disabled>
  </div>
</div>

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

2 个答案: