dav/timepicker/README.md

   1 timePicker
   2 ==========
   3 A time picker control for textfields built using jQuery. Inspired by Google Calendar.
   4
   5 Examples
   6 --------
   7
   8 Default:
   9
  10     $("#time1").timePicker();
  11
  12 02.00 AM - 03.30 PM, 15 minutes steps:
  13
  14     $("#time2").timePicker({
  15       startTime: "02.00", // Using string. Can take string or Date object.
  16       endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object here.
  17       show24Hours: false,
  18       separator: '.',
  19       step: 15});
  20
  21 An example how the two helper functions can be used to achieve
  22 advanced functionality.
  23
  24   - Linking: When changing the first input the second input is updated and the
  25     duration is kept.
  26   - Validation: If the second input has a time earlier than the firs input,
  27     an error class is added.
  28
  29 The example:
  30
  31     // Use default settings
  32     $("#time3, #time4").timePicker();
  33
  34     // Store time used by duration.
  35     var oldTime = $.timePicker("#time3").getTime();
  36
  37     // Keep the duration between the two inputs.
  38     $("#time3").change(function() {
  39       if ($("#time4").val()) { // Only update when second input has a value.
  40         // Calculate duration.
  41         var duration = ($.timePicker("#time4").getTime() - oldTime);
  42         var time = $.timePicker("#time3").getTime();
  43         // Calculate and update the time in the second input.
  44         $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
  45         oldTime = time;
  46       }
  47     });
  48     // Validate.
  49     $("#time4").change(function() {
  50       if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
  51         $(this).addClass("error");
  52       }
  53       else {
  54         $(this).removeClass("error");
  55       }
  56     });