timePicker

A time picker control for textfields built using jQuery. Inspired by Google Calendar.

Examples

Default:

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

02.00 AM - 03.30 PM, 15 minutes steps:

$("#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
});

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.

The example:

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