A time picker control for textfields built using jQuery. Inspired by Google Calendar.
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"); } });