Uhrzeit in Textbox entsprechend dem Clockpicker einstellen

Question

Ich benutze den Clockpicker von http://weareoutman.github.io/clockpicker/ und versuche herauszufinden, wie man die Zeit im Textfeld anzeigt (immer). Ich möchte, dass die Zeit immer als "Jetzt" in der Textbox angezeigt wird, aber dem Benutzer die Möglichkeit gibt, sie mit dem Uhrfenster zu ändern. Ich konnte die "Jetzt" -Zeit als Standard auf der Uhr einstellen, aber ich habe zwei Probleme.

Erstes Problem Die Uhr nicht, wenn seine AM oder PM aus nur mit ‚Now‘

zweite Problem ist, zeigt ich nicht in der Lage bin, dass die Zeit in dem Wert der Textbox angezeigt werden, es sei denn aus seiner ausgewählten die Uhr. Ich möchte, dass die Zeit bereits angezeigt wird. Aber um dem Benutzer die Möglichkeit zu geben, es mit der Uhr zu ändern. Format ex: 08:30 PM

Jede Hilfe mit diesem würde sehr geschätzt werden!

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

Es gibt keine solche Option im clockpicker den Eingangswert mit aktuelle Zeit einzustellen.

Sie können jedoch die Eingabezeit mit der aktuellen Uhrzeit manuell nach dem Clockpicker einstellen. Probieren Sie die folgende Annäherung.

$('.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>