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

Question

我正在使用 http://weareoutman.github.io/clockpicker/ 的时钟选择器，我正在尝试弄清楚如何（始终）在文本框中显示时间。我希望时间在文本框中始终显示为 "Now"，但让用户能够使用时钟 window 更改时间。我已经能够将 'now' 时间设置为时钟的默认时间，但我遇到了两个问题。

第一个问题 仅使用 '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

There is no such option in the clockpicker to set the input value with current time.

但您可以在时钟选择器之后手动将输入时间设置为当前时间。试试下面的方法。

$('.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是textbox的id。我使用以下代码，但它不读取控制器端的值。请给出正确的解决方案。

我在js里写了下面

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

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

Setting time in textbox corresponding with clockpicker

jquery

clockpicker