Bootstrap時間選擇器 - 當我們點擊選取器時如何獲得自定義時間？

Question

我已經使用自定義的「日期時間選擇器」&定製，只爲時間選擇，但我需要得到「定製時間」作爲輸入，而不是「默認時間」。 （例如：我需要點擊時間「8.00」，目前它顯示默認的系統時間） 在此先感謝。 見我的代碼：

$(function() { 
 
$('#datetimepicker1').datetimepicker({ 
 
format: 'LT', 
 
}); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"> 
 

 

 

 
<div class="container"> 
 
<div class="input-group date" id="datetimepicker1"> 
 
<input type="text" class="form-control" name="from1" placeholder="Morning"> 
 
<span class="input-group-addon"> 
 
<span class="glyphicon glyphicon-time"></span> 
 
</span> 
 
</div> 
 
</div> 
 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://momentjs.com/downloads/moment-with-locales.js"></script> 
 
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"> </script> 
 

Answer 1

更新：編輯設置時間，當用戶點擊正確的時鐘圖標。 注：我使用的事件mousedown代替點擊使得datetimepicker控制節目也是自定義時間開始，否則它可能會顯示不同的時間（如果輸入的文本是點擊前空），這可能會造成混淆用戶...

$(function() { 
 
    
 
    //$("#txttime").val("8:00 AM"); //*** initial time here 
 
    
 
    $('#datetimepicker1').datetimepicker({ 
 
    //format: 'hh:mm A' //12 hour format 
 
    format: 'HH:mm'  //24 hour format 
 
    }); 
 

 
    $('#datetimepicker1 .input-group-addon').mousedown(function(){ 
 
    if (!$.trim($('#txttime').val())) $('#txttime').val('08:00'); 
 
    }); 
 
    
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"> 
 

 
<p>&nbsp;</p> 
 

 
<div class="container"> 
 
    <div class="input-group date" id="datetimepicker1"> 
 
    <input type="text" class="form-control" placeholder="Morning" id="txttime" name="txttime" value=""> 
 
    <span class="input-group-addon" id=""> 
 
     <span class="glyphicon glyphicon-time"></span> 
 
    </span> 
 
    </div> 
 
</div> 
 

 

 
<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.7/js/bootstrap.min.js"></script> 
 
<script src="https://momentjs.com/downloads/moment-with-locales.js"></script> 
 
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

Answer 2

參考，此鏈接： - HTML代碼如下https://jdewit.github.io/bootstrap-timepicker/

使用..

<div class="container"> 
    <div class="input-group date" id="datetimepicker1"> 
    <input type="text" class="form-control" name="from1" placeholder="Morning" id="txttime" value="" onclick="timeset();"> 
    <span class="input-group-addon"> 
    <span class="glyphicon glyphicon-time"></span> 
    </span> 
    </div> 
    </div> 

寫在JS中的一部分上點擊功能

function timeset() 
{ 


    var time = new Date(); 
time = time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }); 
alert(time); 
    $("#txttime").val(time); 
} 

Answer 3

請參閱下面的代碼。在timepicker onclicked這裏時所設置的值8:00 AM

$(function() { 
    $('#datetimepicker1').datetimepicker({ 
     format: 'hh:mm', 
    }); 
    $('.input-group-addon').mouseup(function(){ 
     $('#dateT').val('8:00 AM'); 
    }); 
}); 

見JSFiddle。