文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery时间选择器onChange更新相同字段

问jQuery时间选择器onChange更新相同字段
EN

Stack Overflow用户

提问于 2018-02-01 14:36:07

回答 2查看 1.8K关注 0票数 0

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

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

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

不幸的是，我被困在这个系统的维护，所以我不能改变插件或服务器代码。我试图通过使用输入字段的onChange (也是插件本身的changeTime)事件来完成一项工作，将时间转换为适当的格式并将其写回自己。

问题是，似乎在将时间选择器的值实际放入元素之前就触发了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'));
});

javascript

jquery

web

jquery-ui-timepicker

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-02-01 15:22:08

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

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

票数 0

Stack Overflow用户

发布于 2018-02-01 15:25:31

这应该是一项工程：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48565245

复制

相似问题

问jQuery时间选择器onChange更新相同字段
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery时间选择器onChange更新相同字段EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery时间选择器onChange更新相同字段
EN