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

Question

我正在使用 http://weareoutman.github.io/clockpicker/的时钟选择器，我正在尝试弄清楚如何在文本框中显示时间（总是）。我希望时间在文本框中始终显示为"现在"，但让用户能够使用时钟窗口更改它。我已经能够将时钟上的"现在"时间设置为默认值，但我有两个问题。

第一个问题时钟没有显示它的AM还是PM是否仅使用"现在"

第二个问题，除非从时钟中选择该时间，否则我无法在文本框的值中显示该时间。我希望时间现在已经显示出来了。但是允许用户选择用时钟更改它。 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"));