3 A time picker control for textfields built using jQuery. Inspired by Google Calendar.
10 $("#time1").timePicker();
12 02.00 AM - 03.30 PM, 15 minutes steps:
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.
21 An example how the two helper functions can be used to achieve
22 advanced functionality.
24 - Linking: When changing the first input the second input is updated and the
26 - Validation: If the second input has a time earlier than the firs input,
27 an error class is added.
31 // Use default settings
32 $("#time3, #time4").timePicker();
34 // Store time used by duration.
35 var oldTime = $.timePicker("#time3").getTime();
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)));
49 $("#time4").change(function() {
50 if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
51 $(this).addClass("error");
54 $(this).removeClass("error");