JQuery TimePicker OnChange not firing when dropdown is used

Question

I'm using this TimePicker in an HTML form. Here my corresponding 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]" />

A feature of this TimePicker is that whenever it is the focused element in the form, it will open up a dropdown select with values in a range of its min time to max time with a set interval. Here's the JQuery responsible for that:

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

As you might have noticed already I have set an onchange event in both the HTML and JQuery part of the TimePicker implementation, unfortunately it only fires if the user enters the time manually without using the select.

Is there a way to make the onchange method fire on both, selection AND manual entries?

If not, are there other implementations of a TimePicker that can do this?

Answer 1

You are invoking the setDefaultTime function when initializing the timepicker. Pass it as reference(just use function name)

$('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]" />