使用下拉菜单时，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的一个功能是，只要它是表单中的焦点元素，它都会打开一个下拉选择，其值介于其最小时间到最大时间之间，且具有设定的时间间隔。 这是负责此操作的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方法同时作用于选择项和手动项？

如果没有，还有其他的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
});

希望这会有所帮助:)