Two time fields, change the second one when first one is set
<p>I have two time fields in a form. I am using <a href="https://weareoutman.github.io/clockpicker/" rel="nofollow">Clockpicker</a> for setting the time fields. The first of the two time fields is a start time, the second a end time. Before the start time is changed, I need to get the difference between the two time fields and when the start time has changed, I need to automatically in-/decrement the end time field based on the difference I calculated.</p>

<p>jQuery ClockPicker has two events that are suited for this:</p>

<p><code>beforeHide</code> - fires before ClockPicker is hidden (after time has changed)<br/>
<code>afterShow</code> - fires after ClockPicker is shown (before time has change)</p>

<p>I need to be able to use localization for at least de-de (24-hour format) and en-us (12-hour format with AM/PM)</p>

<p>Here's my code (no localization support yet)</p>

<pre><code>var start = new Date();
var end = new Date();
$('.clockpicker-start').clockpicker({
beforeHide: function () {
    $('#activitystartfield #StartTime').val($('.clockpicker-span-hours:visible').html() + ':' + $('.clockpicker-span-minutes:visible').html() + ' ' + $('.clockpicker-span-am-pm:visible').html());
    $('#activityendfield #EndTime').val(end - start);
},
afterShow: function () {
    var hour = $('#activitystartfield #StartTime').val().split(':')[0];
    var minute = $('#activitystartfield #StartTime').val().split(':')[1];
    start.setHours(hour);
    start.setMinutes(minute);
    hour = $('#activityendfield #EndTime').val().split(':')[0];
    minute = $('#activityendfield #EndTime').val().split(':')[1];
    end.setHours(hour);
    end.setMinutes(minute);
}
});
</code></pre>

<p>This gives me the difference in seconds, but I have no idea where to go from here or how to handle localization. </p>