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="//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");
80 <h1>jQuery timePicker</h1>
81 <p>A time picker for jQuery inspired by Google Calendar</p>
82 <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>
84 <div><input type="text" id="time1" size="10" /></div>
85 <pre><code>// Default.
86 $("#time1").timePicker();</code></pre>
88 <div><input type="text" id="time2" size="10" value="12.00 PM"/></div>
89 <pre><code>// 02.00 AM - 03.30 PM, 15 minutes steps.
90 $("#time2").timePicker({
91 startTime: "02.00", // Using string. Can take string or Date object.
92 endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object here.
95 step: 15});</code></pre>
97 <div><input type="text" id="time3" size="10" value="08:00" /> <input type="text" id="time4" size="10" value="09:00" /></div>
98 <pre><code>// An example how the two helper functions can be used to achieve
99 // advanced functionality.
100 // - Linking: When changing the first input the second input is updated and the
102 // - Validation: If the second input has a time earlier than the firs input,
103 // an error class is added.
105 // Use default settings
106 $("#time3, #time4").timePicker();
108 // Store time used by duration.
109 var oldTime = $.timePicker("#time3").getTime();
111 // Keep the duration between the two inputs.
112 $("#time3").change(function() {
113 if ($("#time4").val()) { // Only update when second input has a value.
114 // Calculate duration.
115 var duration = ($.timePicker("#time4").getTime() - oldTime);
116 var time = $.timePicker("#time3").getTime();
117 // Calculate and update the time in the second input.
118 $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
123 $("#time4").change(function() {
124 if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
125 $(this).addClass("error");
128 $(this).removeClass("error");