|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 <head> |
|
4 <title>Javascript Date Chooser Demo</title> |
|
5 <script src="date-functions.js" type="text/javascript"></script> |
|
6 <script src="datechooser.js" type="text/javascript"></script> |
|
7 <link rel="stylesheet" type="text/css" href="../files/datechooser.css"/> |
|
8 <!--[if lte IE 6.5]> |
|
9 <link rel="stylesheet" type="text/css" href="../files/select-free.css"/> |
|
10 <![endif]--> |
|
11 </head> |
|
12 <body> |
|
13 |
|
14 <p>Here are some demos of the Javascript date chooser functionality.</p> |
|
15 |
|
16 <form action="/" method="get"> |
|
17 |
|
18 <p>Here’s one that chooses dates in ISO-8601 format.</p> |
|
19 |
|
20 <input id="dob" name="dob" size="10" maxlength="10" type="text"/><img src="../files/calendar.gif" onclick="showChooser(this, 'dob', 'chooserSpan', 1950, 2010, 'Y-m-d', false);"/> |
|
21 <div id="chooserSpan" class="dateChooser select-free" style="display: none; visibility: hidden; width: 160px;"> |
|
22 </div> |
|
23 |
|
24 <p>Here’s one that chooses dates with time in ISO-8601 format. It uses the pattern defined as a static property of the Date class.</p> |
|
25 |
|
26 <input id="datetime" name="datetime" type="text"/><img src="../files/calendar.gif" onclick="showChooser(this, 'datetime', 'chooserSpan2', 1950, 2010, Date.patterns.ISO8601LongPattern, true);"/> |
|
27 |
|
28 <div id="chooserSpan2" class="dateChooser select-free" style="display: none; visibility: hidden; width: 160px;"> |
|
29 </div> |
|
30 |
|
31 <p>Here’s another that chooses dates in a format with which most Americans will be familiar. It uses the pattern defined as a static property of the Date class.</p> |
|
32 |
|
33 <input id="datetime2" size="10" maxlength="10" name="datetime2" type="text"/><img src="../files/calendar.gif" onclick="showChooser(this, 'datetime2', 'chooserSpan3', 1950, 2010, Date.patterns.ShortDatePattern, false);"/> |
|
34 |
|
35 <div id="chooserSpan3" class="dateChooser select-free" style="display: none; visibility: hidden; width: 160px;"> |
|
36 </div> |
|
37 |
|
38 <p>Finally, these form fields are to test whether the date chooser shows up correctly when there is a form field behind it.</p> |
|
39 |
|
40 <input type="text" name="ignore" style="margin-left: 100px;" /> |
|
41 <br /><select name="ignore2" style="margin-left: 100px;"> |
|
42 <option>Dummy option</option> |
|
43 </select> |
|
44 |
|
45 </form> |
|
46 |
|
47 </body> |
|
48 </html> |