Установка времени в текстовом поле, соответствующем настройке часов

Я использую часы с 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,
});
Источник

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>

Источник

Здесь SlotFrom - это идентификатор текстового поля. Я использую следующий код, но он не считывает значение на стороне контроллера. Пожалуйста, дайте правильное решение.

Я пишу следующее в js

<script>
var Dt = new Date();
$('#SlotFrom').clockpicker({autoclose: true,twelvehour: true}).val(moment(Dt.getTime()).format("HH:mm A"));
Источник
Другие вопросы по тегам