/
index.php
377 lines (336 loc) · 12.3 KB
/
index.php
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
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<?php header('Cache-Control: no-cache, must-revalidate'); header('Content-type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="description" content="glDatePicker - A simple, customizable, lightweight date picker calendar plugin for jQuery" />
<meta name="keywords" content="datepicker, date picker, calendar, date control, jQuery" />
<meta name="author" content="Gautam Lad" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>glDatePicker - A simple, customizable, lightweight date picker calendar plugin for jQuery</title>
<link href="site/css/default.css" rel="stylesheet" type="text/css" />
<link href="site/css/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/android.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="#" class="site">
<div class="container">
<!-- BEGIN header -->
<div class="header">
<div class="title">glDatePicker</div>
<div class="menu">
<ul>
<li><a href="#download">download</a></li>
<li><a href="#usage">usage</a></li>
<li><a href="#examples">examples</a></li>
<li><a href="#about">about</a></li>
</ul>
</div>
</div>
<!-- END header -->
<!-- BEGIN about -->
<div class="content">
<div id="about" class="title">about</div>
<p>
<b>glDatePicker</b> is a simple, customizable, lightweight date picker calendar plugin for <a href="http://jquery.com" target="_blank">jQuery</a> weighing in <span class="special">4KB compressed</span> (11KB uncompressed).
<br/>
<img src="site/img/screenshot.png" width="575" height="300" alt="Example styles" />
<br/>
It includes the following features:
</p>
<ul>
<li>forward and backward navigation</li>
<li>current date highlight</li>
<li>restricting selection of dates outside of a range</li>
<li>restricting selection of dates beyond N-days from start date</li>
<li>restricting forward / backwards month navigation</li>
<li>individual styles per date picker (in case you have multiples on one page)</li>
<li>show currently selected date</li>
</ul>
</div>
<!-- END about -->
<!-- BEGIN examples -->
<div class="content">
<div id="examples" class="title">examples</div>
<p>
Click on the text boxes to see examples of the control with the settings shown.
<br/><br/>
</p>
<!-- BEGIN Example #1 -->
<p>
<b><span class="example">Example #1</span>: Basic usage</b>
</p>
<input type="text" id="date1" class="gldp" />
<br/><br/>
<pre class="brush:js">
// Basic date picker with default settings
$("#date1").glDatePicker();</pre>
<br/><br/>
<!-- END Example #1 -->
<!-- BEGIN Example #2 -->
<p>
<b><span class="example">Example #2</span>: Use a custom styled date picker (only for this control)</b>
</p>
<input type="text" id="date2" class="gldp" />
<br/><br/>
<pre class="brush:js">
// Use a custom theme named android
$("#date2").glDatePicker(
{
cssName: "android",
selectedDate: 5
});</pre>
<br/><br/>
<!-- END Example #2 -->
<!-- BEGIN Example #3 -->
<p>
<b><span class="example">Example #3</span>: Restricting selection to a specific date</b>
</p>
<input type="text" id="date3" class="gldp" />
<br/><br/>
<pre class="brush:js">
// Set the last selectable date to September 5, 2011
$("#date3").glDatePicker(
{
endDate: new Date("September 5, 2011")
});</pre>
<br/><br/>
<!-- END Example #3 -->
<!-- BEGIN Example #3 -->
<p>
<b><span class="example">Example #4</span>: Restricting selection of dates N-days from start date</b>
</p>
<input type="text" id="date4" class="gldp" />
<br/><br/>
<pre class="brush:js">
// Set last selectable date to start date + 5-days, prevent old date selection
// and set selected date to 3-days from start date
$("#date4").glDatePicker(
{
endDate: 5,
startDate: new Date("September 5, 2011"),
selectedDate: 3,
allowOld: false
});</pre>
<br/><br/>
<!-- END Example #4 -->
<!-- BEGIN Example #5 -->
<p>
<b><span class="example">Example #5</span>: Hide prev/next arrows and prevent old dates selections</b>
</p>
<input type="text" id="date5" class="gldp" />
<br/><br/>
<pre class="brush:js">
// Hide prev/next buttons and prevent selection of dates older than today
$("#date5").glDatePicker(
{
showPrevNext: false,
allowOld: false,
startDate: new Date()
});</pre>
<br/><br/>
<!-- END Example #5 -->
<!-- BEGIN Example #6 -->
<p>
<b><span class="example">Example #6</span>: Using a custom callback to show date in a different format</b>
</p>
<input type="text" id="date6" class="gldp" />
<br/><br/>
<pre class="brush:js">
$("#date6").glDatePicker(
{
onChange: function(target, newDate)
{
target.val
(
newDate.getFullYear() + "-" +
newDate.getMonth() + "-" +
newDate.getDate()
);
}
});</pre>
<!-- END Example #6 -->
</div>
<!-- END examples -->
<!-- BEGIN usage -->
<div class="content">
<div id="usage" class="title">usage</div>
<p>
Below are all the available settings that can be adjusted and public methods that can be called.
The values shown are the default setting values.
<br/><br/>
</p>
<pre class="brush:js">
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Settings
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
$("#date").glDatePicker(
{
// Name of the stylesheet to use.
// For example, if your css name is called doublerainbow
// then all all your css elements will need to be
// prefixed with .gldp-doublerainbow in your stylesheet.
// Use the /css/default.css as a starting point.
cssName: "default",
// Set starting date.
// NOTE: Consider setting allowOld to false to make the startDate the
// first date that can be selected.
// Possible values:
// -1 : Use beginning of current month
// Date() : A javascript date, for example: new Date("September 5, 2011")
startDate: -1,
// Set last selectable date. Can be an actual date or a number indicating
// offset from the startDate value.
// Possible values:
// -1 : No end date
// +ve : A positive number indicating # of days from startDate
// Date() : A javascript date, for example: new Date("September 5, 2011")
endDate: -1,
// Set the currently selected date. Can be an actual date or a number indicating
// offset from the startDate value.
// Possible values:
// -1 : No selected date
// +ve : A positive number indicating # of days from startDate
// Date() : A javascript date, for example: new Date("September 5, 2011")
selectedDate: -1,
// Show previous and next arrows. Arrows will be automatically shown or
// hidden if set to true. Set to false to force it never show.
// Possible values: true | false
showPrevNext: true,
// Allow selection of dates older than startDate if set to true.
// Possible values: true | false
allowOld: true,
// Show the calendar at all times if set to true.
// NOTE: Consider using position: "inherit" if you set this to true.
// Possible values: true | false
showAlways: false,
// Set how calendar will appear positioned on the page.
// Note: If you are using showAlways: true, then consider
// setting the position to inherit
// Possible values: static | absolute | fixed | relative | inherit
position: "absolute",
// A callback function to call when a date has been selected.
// Possible values: a function with two arguments: target, newDate
// For example:
// $("#date").glDatePicker(
// {
// onChange: function(target, newDate)
// {
// target.val
// (
// newDate.getFullYear() + "-" +
// newDate.getMonth() + "-" +
// newDate.getDate()
// );
// }
// });
onChange: null
});
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Public methods
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
// Set a new start date
$("#date").glDatePicker("setStartDate", new Date("September 5, 2011"));
// Set a new end date
$("#date").glDatePicker("setEndDate", new Date("September 5, 2011"));
// Set a new selected date
$("#date").glDatePicker("setSelectedDate", new Date("September 5, 2011"));</pre>
</div>
<!-- END usage -->
<!-- BEGIN download -->
<div class="content">
<div id="download" class="title">download</div>
<ul>
<li>
<a href="site/download/glDatePicker-v1.1.zip">glDatePicker-v1.1.zip</a> - Released Aug 6, 2011</li>
<li><a href="site/download/glDatePicker-v1.0.zip">glDatePicker-v1.0.zip</a> - Released Aug 1, 2011</li>
</ul>
</div>
<!-- END download -->
<!-- BEGIN download -->
<div class="content">
<div id="clone" class="title">clone from github</div>
Clone the latest source directly from the <a href="https://github.com/glad/glDatePicker/">github</a> repository.
<br/><br/>
<pre class="brush:bash">
$ git clone https://github.com/glad/glDatePicker.git</pre>
</div>
<!-- END download -->
<!-- BEGIN footer -->
<div class="footer">
<span class="copyright">Copyright © 2011 <a href="http://gautamlad.com/">Gautam Lad</a>. All rights reserved</span>
<span class="contact"><a href="mailto:email@gautamlad.com">contact</a></span>
</div>
<!-- BEGIN footer -->
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="site/js/XRegExp.js" type="text/javascript"></script>
<script src="site/js/shCore.js" type="text/javascript"></script>
<script src="site/js/shBrushJScript.js" type="text/javascript"></script>
<script src="site/js/shBrushBash.js" type="text/javascript"></script>
<script type="text/javascript" src="js/glDatePicker.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
SyntaxHighlighter.defaults["brush"] = "js";
SyntaxHighlighter.defaults["ruler"] = false;
SyntaxHighlighter.defaults["toolbar"] = false;
SyntaxHighlighter.defaults["gutter"] = false;
SyntaxHighlighter.all();
// Basic date picker with default settings
$("#date1").glDatePicker();
// Use a custom theme named android
$("#date2").glDatePicker(
{
cssName: "android",
selectedDate: 5
});
// Set the last selectable date to September 5, 2011
$("#date3").glDatePicker(
{
endDate: new Date("September 5, 2011")
});
// Set last selectable date to start date + 5-days and prevent old date selection
$("#date4").glDatePicker(
{
endDate: 5,
startDate: new Date("September 5, 2011"),
selectedDate: 3,
allowOld: false
});
// Hide prev/next buttons and prevent selection of dates older than today
$("#date5").glDatePicker(
{
showPrevNext: false,
allowOld: false,
startDate: new Date()
});
// Use a custom callback to show date in a diffent format
$("#date6").glDatePicker(
{
onChange: function(target, newDate)
{
target.val
(
newDate.getFullYear() + "-" +
newDate.getMonth() + "-" +
newDate.getDate()
);
}
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7701484-3']);
_gaq.push(['_setDomainName', '.gautamlad.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>