javascript - 使用下拉菜单时，JQuery TimePicker OnChange 不会触发

Question

我正在使用这个TimePicker以 HTML 形式。这是我对应的 HTML:

<input class="form-control timepicker" disabled="@formDisabled" name="starttime" onchange="setDefaultTime()" value="@(test123)" placeholder="Startzeit" autocomplete="off" pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]" />

此 TimePicker 的一个功能是，只要它是表单中的焦点元素，它就会打开一个下拉选择，其中的值在其最短时间到最大时间范围内，并具有设定的时间间隔。这是负责此操作的 JQuery:

$('input.timepicker').timepicker({
    timeFormat: 'HH:mm',
    interval: 5,
    minTime: '6:00am',
    maxTime: '10:00pm',
    dynamic: false,
    dropdown: true,
    scrollbar: true,
    change: setDefaultTime()
});

您可能已经注意到，我已经在 TimePicker 实现的 HTML 和 JQuery 部分中设置了 onchange 事件，不幸的是，只有当用户手动输入时间而不使用选择时，它才会触发。

有没有办法让 onchange 方法同时触发选择和手动输入？

如果没有，是否有其他 TimePicker 实现可以做到这一点？

Answer 1

您在初始化时间选择器时调用setDefaultTime函数。将其作为引用传递(只需使用函数名称)

$('input.timepicker').timepicker({
    ....
    change: setDefaultTime //Notice removed () from here
});

function setDefaultTime(time) {
  console.log('Selected Time is:' + time)
}

$('input.timepicker').timepicker({
  timeFormat: 'HH:mm',
  interval: 5,
  minTime: '6:00am',
  maxTime: '10:00pm',
  dynamic: false,
  dropdown: true,
  scrollbar: true,
  change: setDefaultTime
})

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<input class="form-control timepicker" name="starttime" placeholder="Startzeit" autocomplete="off" pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]" />