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