$("#time1").timePicker();

$("#time2").timePicker({
  startTime: "02.00 AM", // Using string. Can take string or Date object.
  endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object here.
  timeFormat: 'hh.mm tt',
  step: 15
});

// Use default settings
$("#time3, #time4").timePicker();

// Store time used by duration.
var oldTime = $.timePicker("#time3").getTime();

// Keep the duration between the two inputs.
$("#time3").change(function() {
  if ($("#time4").val()) { // Only update when second input has a value.
    // Calculate duration.
    var duration = ($.timePicker("#time4").getTime() - oldTime);
    var time = $.timePicker("#time3").getTime();
    // Calculate and update the time in the second input.
    $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
    oldTime = time;
  }
});
// Validate.
$("#time4").change(function() {
  if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
    $(this).addClass("error");
  }
  else {
    $(this).removeClass("error");
  }
});