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", // Using string. Can take string or Date object.
endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object here.
defaultSelected: "11.30", // defaults to startTime if not specified
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.
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");
}
});