在与clockpicker相对应的文本框中设置时间

我正在使用http://weareoutman.github.io/clockpicker/中的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, 
});

来源

2016-06-10 David Brierton

有一个在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>

来源

2016-06-15 07:35:11

简单，清洗容易的解决方案。 +1。 – Paul

在与clockpicker相对应的文本框中设置时间

回答

相关问题