LeonidasFett LeonidasFett - 1 year ago 108
jQuery Question

Two time fields, change the second one when first one is set

I have two time fields in a form. I am using Clockpicker 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.

jQuery ClockPicker has two events that are suited for this:

- fires before ClockPicker is hidden (after time has changed)

- fires after ClockPicker is shown (before time has change)

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)

Here's my code (no localization support yet)

var start = new Date();
var end = new Date();
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];
hour = $('#activityendfield #EndTime').val().split(':')[0];
minute = $('#activityendfield #EndTime').val().split(':')[1];

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

Answer Source

I'm so sorry for my delayed reply; I was out earlier.

I tweaked a couple of things in your fiddle. First, I made the end input disabled until the user had inputted a start time. I removed the readonly attribute (you need to be remove it to be able to read the updated values I discovered). I added both an afterShow and afterDone to both start and end clockpickers I didn't get around the AM/FM bit but i added a span which is updated with a display of the time difference (hours and mins) to the user

I discovered en route that if the mins were over 30 that the hour went onto the next hour so there's an if statement in the code to check for this

Here is current code - i tried to create a snippet and SO froze on me, so this is second go. Will try again in a while.

Hope this helps

$(document).ready(function() {
  var start = new Date();
  var end = new Date();
  var difference;

    donetext: "Done",

    afterShow: function() {
      start = $('#start').clockpicker('getTime');
      console.log('Start after show: ' + start);
    afterDone: function() {
      start = $('#start').clockpicker('getTime');
      console.log('Start after done: ' + start);
      $('#end').prop('disabled', false);

    donetext: "Done",

    afterShow: function() {
      end = $('#end').clockpicker('getTime');
      console.log('End after show: ' + end);
    afterDone: function() {
      end = $('#end').clockpicker('getTime');
      console.log('End after done: ' + end);
      difference = (end - start);
      console.log('Difference: ' + difference);
      console.log('Difference: ' + difference / 1000);
      console.log(difference / 1000 / 60);
      console.log(difference / 1000 / 60 / 60);

  function getdiff(s) {
    var secs = Math.round(s/ 1000);
    var modsecs = ((Math.round(s/1000))%60); //remaining secs if not even
    var mins = Math.round(s/1000/60);
    var modmins = ((Math.round(s/1000/60))%60); //mins remaining if not even
    var modhrs = ((Math.round(s/1000/60/60))%24); //mins remaining if not even
    var hrs = Math.round(s/1000/60/60);
    if (modmins >=30){
        modhrs = modhrs-1;
    var enddiff = [
    var arr = jQuery.map(enddiff, function(modhrs) {
      return modhrs + ":" + modmins;
    $('#diff').text("Difference is " +arr);
.clockpicker-popover {
  width: 300px;

.clockpicker-button {
  width: 100%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/weareoutman/clockpicker/gh-pages/src/clockpicker.css" rel="stylesheet"/>
<script src="https://rawgit.com/JordyMoos/clockpicker/6f0ac5f0eb07b5302ebbc4ed7fd5b312c8fae224/src/clockpicker.js"></script>

<input id="start" val=" " data-default="09:00" />
<input disabled id="end" val=" " data-default="19:00" />
<span id="diff" val=" "> </span>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download