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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
|
<html style="background-color: buttonface; color: buttontext;">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Simple calendar setups [popup calendar]</title>
<!-- calendar stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
<!-- main calendar program -->
<script type="text/javascript" src="calendar.js"></script>
<!-- language for the calendar -->
<script type="text/javascript" src="lang/calendar-en.js"></script>
<!-- the following script defines the Calendar.setup helper function, which makes
adding a calendar a matter of 1 or 2 lines of code. -->
<script type="text/javascript" src="calendar-setup.js"></script>
</head>
<body>
<h2>DHTML Calendar — for the impatient</h2>
<blockquote>
<p>
This page lists some common setups for the popup calendar. In
order to see how to do any of them please see the source of this
page. For each example it's structured like this: there's the
<form> that contains the input field, and following there is
the JavaScript snippet that setups that form. An example of
<em>flat</em> calendar is available in <a
href="simple-2.html">another page</a>.
</p>
<p>
The code in this page uses a helper function defined in
"calendar-setup.js". With it you can setup the calendar in
minutes. If you're not <em>that</em> impatient, ;-) <a
href="doc/html/reference.html">complete documenation</a> is
available.
</p>
</blockquote>
<hr />
<p><b>Basic setup: one input per calendar.</b> Clicking in the input field
activates the calendar. The date format is "%m/%d/%Y %I:%M %p". The
calendar defaults to "single-click mode".</p>
<p>The example below has been updated to show you how to create "linked"
fields. Basically, when some field is filled with a date, the other
is updated so that the difference between them remains one week. The
property useful here is "onUpdate".</p>
<form action="#" method="get">
<input type="text" name="date" id="f_date_a" />
<input type="text" name="date" id="f_calcdate" />
</form>
<script type="text/javascript">
function catcalc(cal) {
var date = cal.date;
var time = date.getTime()
// use the _other_ field
var field = document.getElementById("f_calcdate");
if (field == cal.params.inputField) {
field = document.getElementById("f_date_a");
time -= Date.WEEK; // substract one week
} else {
time += Date.WEEK; // add one week
}
var date2 = new Date(time);
field.value = date2.print("%Y-%m-%d %H:%M");
}
Calendar.setup({
inputField : "f_date_a", // id of the input field
ifFormat : "%Y-%m-%d %H:%M", // format of the input field
showsTime : true,
timeFormat : "24",
onUpdate : catcalc
});
Calendar.setup({
inputField : "f_calcdate",
ifFormat : "%Y-%m-%d %H:%M",
showsTime : true,
timeFormat : "24",
onUpdate : catcalc
});
</script>
<hr />
<p><b>Input field with a trigger button.</b> Clicking the button activates
the calendar. Note that this one needs double-click (singleClick parameter
is explicitely set to false). Also demonstrates the "step" parameter
introduced in 0.9.6 (show all years in drop-down boxes, instead of every
other year as default).</p>
<form action="#" method="get">
<input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button>
</form>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_b", // id of the input field
ifFormat : "%m/%d/%Y %I:%M %p", // format of the input field
showsTime : true, // will display a time selector
button : "f_trigger_b", // trigger for the calendar (button ID)
singleClick : false, // double-click mode
step : 1 // show all years in drop-down boxes (instead of every other year as default)
});
</script>
<hr />
<p><b>Input field with a trigger image.</b> Note that the Calendar.setup
function doesn't care if the trigger is a button, image, or anything else.
Also in this example we setup a different alignment, just to show how it's
done. The input field is read-only (that is set from HTML).</p>
<form action="#" method="get">
<table cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr>
<td><input type="text" name="date" id="f_date_c" readonly="1" /></td>
<td><img src="img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /></td>
</table>
</form>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_c", // id of the input field
ifFormat : "%B %e, %Y", // format of the input field
button : "f_trigger_c", // trigger for the calendar (button ID)
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
</script>
<hr />
<p><b>Hidden field, display area.</b> The calendar now puts the date into 2
elements: one is an input field of type "hidden"—so that the user
can't directly see or modify it— and one is a <span> element in
which the date is displayed. Note that if the trigger is not specified the
calendar will use the displayArea (or inputField as in the first example).
The display area can have it's own format. This is useful if, for instance,
we need to store one format in the database (thus pass it in the input
field) but we wanna show a friendlier format to the end-user.</p>
<form action="#" method="get" style="visibility: hidden">
<input type="hidden" name="date" id="f_date_d" />
</form>
<p>Your birthday:
<span style="background-color: #ff8; cursor: default;"
onmouseover="this.style.backgroundColor='#ff0';"
onmouseout="this.style.backgroundColor='#ff8';"
id="show_d"
>Click to open date selector</span>.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_d", // id of the input field
ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored)
displayArea : "show_d", // ID of the span where the date is to be shown
daFormat : "%A, %B %d, %Y",// format of the displayed date
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
</script>
<hr />
<p><b>Hidden field, display area, trigger image.</b> Very similar to the
previous example. The difference is that we also have a trigger image.</p>
<form action="#" method="get" style="visibility: hidden">
<input type="hidden" name="date" id="f_date_e" />
</form>
<p>Your birthday: <span id="show_e">-- not entered --</span> <img
src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid
red;" title="Date selector" onmouseover="this.style.background='red';"
onmouseout="this.style.background=''" />.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_e", // id of the input field
ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored)
displayArea : "show_e", // ID of the span where the date is to be shown
daFormat : "%A, %B %d, %Y",// format of the displayed date
button : "f_trigger_e", // trigger button (well, IMG in our case)
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
</script>
<hr />
<p><b>Hidden field, display area.</b> Very much like the previous examples,
but we now disable some dates (all weekends, that is, Saturdays and
Sundays).</p>
<form action="#" method="get" style="visibility: hidden">
<input type="hidden" name="date" id="f_date_f" />
</form>
<p>Your birthday:
<span style="background-color: #ff8; cursor: default;"
onmouseover="this.style.backgroundColor='#ff0';"
onmouseout="this.style.backgroundColor='#ff8';"
id="show_f"
>Click to open date selector</span>.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_f", // id of the input field
ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored)
displayArea : "show_f", // ID of the span where the date is to be shown
daFormat : "%A, %B %d, %Y",// format of the displayed date
align : "Tl", // alignment (defaults to "Bl")
dateStatusFunc : function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0)
return (date.getDay() == 6 || date.getDay() == 0) ? true : false;
}
});
</script>
</body>
</html>
|
