JQuery 使用下拉菜单时 TimePicker OnChange 不触发

Question

我在 HTML 表单中使用此 TimePicker。这里我对应的是 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 的一个特点是，只要它是表单中的焦点元素，它就会打开一个下拉列表 select，其中的值在其最小时间到最大时间范围内，并具有设定的间隔。这是 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 事件，不幸的是，只有当用户手动输入时间而不使用select.

有没有办法让 onchange 方法同时触发 select离子和手动输入？

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

Answer 1

您在初始化 timepicker 时调用了 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]" />

Answer 2

您只需要在 timeicker 中针对更改选项指定函数名称，

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

希望这对您有所帮助:)

JQuery 使用下拉菜单时 TimePicker OnChange 不触发

JQuery TimePicker OnChange not firing when dropdown is used

javascript

jquery

html

timepicker