Setting time in textbox corresponding with clockpicker

Question

I am using the clockpicker from http://weareoutman.github.io/clockpicker/ and I am trying to figure out how to show the time in the textbox (always). I want the time to always be shown as "Now" in the textbox but give the user the ability to change it with the clock window. I have been able to set the 'now' time as default on the clock but I am having two problems.

First problem The clock is not showing if its AM or PM from just using 'Now'

Second problem I am unable to display that time in the value of the textbox unless its selected from the clock. I want the time to already be displayed for now. But to allow the user the option to change it with the clock. Format ex: 08:30 PM

Any help with this would be greatly appreciated!

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.

But you can set the input time with current time manually after the clockpicker. Try the below approch.

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