在與clockpicker相對應的文本框中設置時間

Question

我正在使用http://weareoutman.github.io/clockpicker/中的clockpicker，我試圖弄清楚如何在文本框中顯示時間（總是）。我希望時間在文本框中始終顯示爲「現在」，但讓用戶能夠使用時鐘窗口對其進行更改。我已經能夠將'現在'時間設置爲默認時鐘，但是我有兩個問題。

第一個問題 ，時鐘沒有顯示，如果它是上午還是下午從只使用「現在」

問題二我無法顯示在文本框中的值時，除非它從選擇時鐘。我想現在已經顯示的時間。但爲了讓用戶可以選擇使用時鐘進行更改。 Format ex: 08:30 PM

任何幫助，這將不勝感激！

http://jsfiddle.net/YkvK9/1714/

<div class="col-lg-6"> 
    <div class="form-group"> 
    <label>test</label> 
    <div class="input-group clockpicker" data-autoclose="true"> 
     <input type="text" class="form-control" value=""> 
     <span class="input-group-addon"> 
     <span class="fa fa-clock-o"></span> 
     </span> 
    </div> 
    </div> 
</div> 

$('.clockpicker').clockpicker({ 
    'default': 'now', 
    twelvehour: true, 
}); 

Answer 1

有一個在clockpicker沒有這樣的選項來設置與 當前時間的輸入值。

但您可以在clockpicker之後手動設置輸入時間和當前時間。嘗試以下方法。

$('.clockpicker').clockpicker({ 
 
    'default': DisplayCurrentTime(), 
 
    twelvehour: true, 
 
}).find('input').val(DisplayCurrentTime()) 
 

 
function DisplayCurrentTime() { 
 
    var date = new Date(); 
 
    var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours(); 
 
    var am_pm = date.getHours() >= 12 ? "PM" : "AM"; 
 
    hours = hours < 10 ? "0" + hours : hours; 
 
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); 
 
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); 
 
    time = hours + ":" + minutes + ":" + am_pm; 
 
    //time = hours + ":" + minutes + am_pm; 
 
    return time; 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" /> 
 
<link href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet" /> 
 
<script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script> 
 
<div class="col-lg-6"> 
 
    <div class="form-group"> 
 
    <label>test</label> 
 
    <div class="input-group clockpicker" data-autoclose="true"> 
 
     <input type="text" class="form-control" value=""> 
 
     <span class="input-group-addon"> 
 
      <span class="fa fa-clock-o"></span> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</div>