与时钟选择器对应的文本框中的设置时间

Question

我正在使用来自http://weareoutman.github.io/clockpicker/的时钟选择器，并且我试图弄清楚如何在文本框中显示时间(总是这样)。我希望时间总是显示为“现在”在文本框，但赋予用户的能力，以改变它的时钟窗口。我已经能够将“现在”的时间设定为时钟上的默认时间，但我有两个问题。

First problem时钟没有显示它的AM或PM是否只是使用'Now‘

第二个问题我无法在文本框的值中显示时间，除非它是从时钟中选择的。我希望现在时间已经显示出来。但是为了让用户可以选择用时钟来改变它。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({
  '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>

​

Answer 2

这里，SlotFrom是文本框的id。我使用以下代码，但它不读取控制器端的值。请给出正确的解决方案。

我是用js写的。

<script>
var Dt = new Date();
$('#SlotFrom').clockpicker({autoclose: true,twelvehour: true}).val(moment(Dt.getTime()).format("HH:mm A"));