jQuery timePicker

A time picker for jQuery inspired by Google Calendar

Get the latest code on Github (the files used on this page might not be the latest): http://github.com/perifer/timePicker

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

// 02.00 AM - 03.30 PM, 15 minutes steps.
$("#time2").timePicker({
  startTime: "02.00", // Using string. Can take string or Date object.
  endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object here.
  show24Hours: false,
  separator: '.',
  step: 15});

// An example how the two helper functions can be used to achieve 
// advanced functionality.
// - Linking: When changing the first input the second input is updated and the
//   duration is kept.
// - Validation: If the second input has a time earlier than the firs input,
//   an error class is added.

// 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");
  }
});