<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>jQuery timePicker</title> <style type="text/css" media="all">@import "timePicker.css";</style> <style type="text/css"> div { margin-top:3em; } input { margin:0; padding:0; } body { background: #eee; } pre { background:#fff; border:1px solid #ddd; padding:4px; } .error { border:1px solid red; } </style> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript" src="jquery.timePicker.js"></script> <script type="text/javascript"> jQuery(function() { // 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. 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"); } }); }); </script> </head> <body> <h1>jQuery timePicker</h1> <p>A time picker for jQuery inspired by Google Calendar</p> <p>Get the latest code on Github (the files used on this page might not be the latest): <a href="http://github.com/perifer/timePicker">http://github.com/perifer/timePicker</a> <div><input type="text" id="time1" size="10" /></div> <pre><code>// Default. $("#time1").timePicker();</code></pre> <div><input type="text" id="time2" size="10" value="12.00 PM"/></div> <pre><code>// 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});</code></pre> <div><input type="text" id="time3" size="10" value="08:00" /> <input type="text" id="time4" size="10" value="09:00" /></div> <pre><code>// 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"); } });</code></pre> </body> </html>