24形式の入力型時間を作る

Question

私は何か行を作ろうとしていますが、12形式ではない24形式であるため、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

あなたはこれを行うには、矢印の二組、時間1と分のための1つを必要とします。
これは、矢印ごとに1つずつ、4つのイベントハンドラが必要であることを意味します。
残りは簡単な数学です。

あなたの質問にはCSSがあまり含まれていないので、私は矢印を配置するためにそれを試しました。
そして私はあなたがブートストラップを使用すると仮定しました。あなたはブートストラップとjQueryを使用し

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

Answer 2

。したがって、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に記載されています。