1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
4 <title>jQuery timePicker</title>
5 <style type="text/css" media="all">@import "timePicker.css";</style>
6 <style type="text/css">
19 border:1px solid #ddd;
27 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
28 <script type="text/javascript" src="jquery.timePicker.js"></script>
29 <script type="text/javascript">
32 $("#time1").timePicker();
33 // 02.00 AM - 03.30 PM, 15 minutes steps.
34 $("#time2").timePicker({
35 startTime: "02.00", // Using string. Can take string or Date object.
36 endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object.
41 // An example how the two helper functions can be used to achieve
42 // advanced functionality.
43 // - Linking: When changing the first input the second input is updated and the
45 // - Validation: If the second input has a time earlier than the firs input,
46 // an error class is added.
48 // Use default settings
49 $("#time3, #time4").timePicker();
51 // Store time used by duration.
52 var oldTime = $.timePicker("#time3").getTime();
54 // Keep the duration between the two inputs.
55 $("#time3").change(function() {
56 if ($("#time4").val()) { // Only update when second input has a value.
57 // Calculate duration.
58 var duration = ($.timePicker("#time4").getTime() - oldTime);
59 var time = $.timePicker("#time3").getTime();
60 // Calculate and update the time in the second input.
61 $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
66 $("#time4").change(function() {
67 if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
68 $(this).addClass("error");
71 $(this).removeClass("error");
77 <script type="text/javascript">
79 var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-123444-3"]),_gaq.push(["_trackPageview"]),function(){var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)}()
84 <h1>jQuery timePicker</h1>
85 <p>A time picker for jQuery inspired by Google Calendar</p>
86 <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>
88 <div><input type="text" id="time1" size="10" /></div>
89 <pre><code>// Default.
90 $("#time1").timePicker();</code></pre>
92 <div><input type="text" id="time2" size="10" value="12.00 PM"/></div>
93 <pre><code>// 02.00 AM - 03.30 PM, 15 minutes steps.
94 $("#time2").timePicker({
95 startTime: "02.00", // Using string. Can take string or Date object.
96 endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object here.
99 step: 15});</code></pre>
101 <div><input type="text" id="time3" size="10" value="08:00" /> <input type="text" id="time4" size="10" value="09:00" /></div>
102 <pre><code>// An example how the two helper functions can be used to achieve
103 // advanced functionality.
104 // - Linking: When changing the first input the second input is updated and the
106 // - Validation: If the second input has a time earlier than the firs input,
107 // an error class is added.
109 // Use default settings
110 $("#time3, #time4").timePicker();
112 // Store time used by duration.
113 var oldTime = $.timePicker("#time3").getTime();
115 // Keep the duration between the two inputs.
116 $("#time3").change(function() {
117 if ($("#time4").val()) { // Only update when second input has a value.
118 // Calculate duration.
119 var duration = ($.timePicker("#time4").getTime() - oldTime);
120 var time = $.timePicker("#time3").getTime();
121 // Calculate and update the time in the second input.
122 $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
127 $("#time4").change(function() {
128 if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
129 $(this).addClass("error");
132 $(this).removeClass("error");