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

初始化setDefaultTime时，您正在调用timepicker函数。将其作为参考传递（仅使用函数名称）

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

＆＃13;

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
})

＆＃13;

<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]" />

＆＃13;

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不会触发

2 个答案: