Question

我正在使用这个jQuery timepicker：

http://jonthornton.github.io/jquery-timepicker/

我想在人类可读时间显示列表，但需要表单将时间提交为HH：MM：SS。它看起来不像这个插件允许用户有两种不同的格式，如datepicker。

不幸的是，我坚持使用这个系统进行维护，所以我无法更改插件或服务器代码。我正在尝试通过使用输入字段的onChange（也是插件自己的changeTime）事件来进行解决，将时间转换为正确的格式并将其写回自身。

问题是，在将timepicker的值实际放入元素之前，似乎触发了onChange事件。在被时间戳的值覆盖之前，我看到正确的转换时间为瞬间。

如果我使用延迟来更新字段，它会起作用，但从用户端看起来不太好。

有什么想法？谢谢！

请参阅以下代码：

这是有效的（延迟，它似乎需要至少150毫秒才能工作）

$("#" + elementId).on('change', function() {
    var m = new moment($(this).val(), 'hh:mm a');
    setTimeout(function(){ $($this).val(m.format('HH:mm:ss')); }, 150);
});

这不是 - 我会在被覆盖之前一瞬间看到它。

$("#" + elementId).on('change', function() {
    var m = new moment($(this).val(), 'hh:mm a');
    $(this).val(m.format('HH:mm:ss'));
});

Answer 1

似乎主要问题与使用的timepicker版本和timepicker中设置的timeFormat有关。我已将timeFormat: 'g:i A'更改为timeFormat: 'h:mm:ss p'，因为moment.js似乎无法转换第一种格式，正如我所说，我已更改了timepicker库。请参阅下面的工作代码：

$(document).ready(function() {
  enableTimePicker('test');
});

function enableTimePicker(elementId) {
  $("#" + elementId).timepicker({
    timeFormat: 'h:mm:ss p',
    disableTextInput: true,
    disableTouchKeyboard: true,
    minTime: '00:30:00',
    'noneOption': [{
      'label': 'Midnight',
      'value': '23:59:59'
    }]
  });

  $("#" + elementId).on('change', function() {
    if ($(this).val() != '23:59:59') {
      var m = new moment($(this).val(), 'hh:mm a');
      // setTimeout(function(){ $("#" + elementId).val(m.format('HH:mm:ss')); }, 150);
      $("#" + elementId).val(m.format('HH:mm:ss'));
    }
  });
}

.ui-timepicker-wrapper {
  overflow-y: auto;
  max-height: 150px;
  width: 6.5em;
  background: #fff;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  outline: none;
  z-index: 10001;
  margin: 0;
}

.ui-timepicker-wrapper.ui-timepicker-with-duration {
  width: 13em;
}

.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
  width: 11em;
}

.ui-timepicker-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-timepicker-duration {
  margin-left: 5px;
  color: #888;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
  color: #888;
}

.ui-timepicker-list li {
  padding: 3px 0 3px 5px;
  cursor: pointer;
  white-space: nowrap;
  color: #000;
  list-style: none;
  margin: 0;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
  background: #fff;
  color: #000;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
  background: #1980EC;
  color: #fff;
}

li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
  color: #ccc;
}

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
  color: #888;
  cursor: default;
}

.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
  background: #f2f2f2;
}

<link href="/libs/jquery-timepicker-1.11.13/jquery.timepicker.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>

<form>
  <div class="form-group">
    <label class="col-md-4 control-label" for="test">Test Input</label>
    <div class="col-md-4">
      <input id="test" name="test" type="text" placeholder="" class="form-control input-md" data-input_type="4">
    </div>
  </div>
</form>

Answer 2

这应该有效：

 $("#" + elementId).on('change', function(element) {
     var m = new moment(element.val(), 'hh:mm a');
     element.val(m.format('HH:mm:ss'));
 });

jQuery Timepicker onChange更新相同的字段

2 个答案: