jQuery Timepicker onChange update same field

I am using this jQuery timepicker:

http://jonthornton.github.io/jquery-timepicker/

I want to show the list in human readable times, but need the form to submit the time as HH:MM:SS. It does not look like this plugin allows the user to have two different formats like the datepicker does.

Unfortunately, I am stuck with this system to maintain so I can't change plugins or server code. I am trying to do a work around by using the onChange (also the plugin's own changeTime) event of the input field to convert the time into the proper format and write it back to itself.

The problem is that it seems the onChange event is getting triggered before the timepicker's value is actually being put into the element. I see the correct converted time for a split second before it gets overwritten with the timepicker's value.

It works if I use a delay to update the field, but it doesn't look very nice from the user side.

Any thoughts? Thanks!

Please see the code below:

This works (with the delay, it seems it needs to be at least 150ms for it to work)

$("#" + elementId).on('change', function() {
    var m = new moment($(this).val(), 'hh:mm a');
    setTimeout(function(){ $($this).val(m.format('HH:mm:ss')); }, 150);
});

This does not - I see it for a split second before it gets overwritten.

$("#" + elementId).on('change', function() {
    var m = new moment($(this).val(), 'hh:mm a');
    $(this).val(m.format('HH:mm:ss'));
});