jQuery Timepicker onChange 更新同一字段

Question

我正在使用这个 jQuery 时间选择器：

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

我想以人类可读的时间显示列表，但需要表单提交时间为 HH:MM:SS。看起来这个插件不像日期选择器那样允许用户拥有两种不同的格式。

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

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

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

有什么想法吗？谢谢！

请看下面的代码：

这个有效（有延迟，似乎至少需要 150ms 才能有效）

$("#" + 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

似乎主要问题与使用的时间选择器版本和时间选择器中设置的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 更新同一字段

jQuery Timepicker onChange update same field

javascript

jquery

web

jquery-ui-timepicker