forked from perifer/timePicker
/
index.htm
137 lines (123 loc) · 4.7 KB
/
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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="http://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>
<script type="text/javascript">
// Analytics.
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)}()
</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>