source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/tests/visual/datepicker/datepicker.html@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

Oran code for supporting format changes to document.
  • Property svn:executable set to *
File size: 3.1 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4 <title>Simple Datepicker</title>
5 <link rel="stylesheet" href="../all.css" type="text/css">
6 <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
7 <script type="text/javascript" src="../../../jquery-1.4.1.js"></script>
8 <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
9 <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10 <script type="text/javascript" src="../../../ui/jquery.ui.datepicker.js"></script>
11 <script type="text/javascript">
12 $(function() {
13 // simple datepicker
14 $('#d1').datepicker();
15 $('button.disable-d1').click(function(event){
16 $('#d1').datepicker('disable');
17 event.preventDefault();
18 });
19 $('button.enable-d1').click(function(event){
20 $('#d1').datepicker('enable');
21 event.preventDefault();
22 });
23 $('button.destroy-d1').click(function(event){
24 $('#d1').datepicker('destroy');
25 event.preventDefault();
26 });
27
28 // multi datepicker
29 $('#d2').datepicker({numberOfMonths: 3, showButtonPanel: true});
30 $('button.disable-d2').click(function(event){
31 $('#d2').datepicker('disable');
32 event.preventDefault();
33 });
34 $('button.enable-d2').click(function(event){
35 $('#d2').datepicker('enable');
36 event.preventDefault();
37 });
38 $('button.destroy-d2').click(function(event){
39 $('#d2').datepicker('destroy');
40 event.preventDefault();
41 });
42
43 // inline datepicker
44 $('#inl').datepicker({minDate: -20, maxDate: '+1M +10D'});
45 $('button.disable-inl').click(function(event){
46 $('#inl').datepicker('disable');
47 event.preventDefault();
48 });
49 $('button.enable-inl').click(function(event){
50 $('#inl').datepicker('enable');
51 event.preventDefault();
52 });
53 $('button.destroy-inl').click(function(event){
54 $('#inl').datepicker('destroy');
55 event.preventDefault();
56 });
57
58 // disabled input datepicker
59 $('#d3').datepicker();
60
61 // bottom-right datepicker
62 $('#d4').datepicker({numberOfMonths: 3});
63 });
64 </script>
65</head>
66<body>
67
68<ul class="plugins">
69 <li class="plugin">
70 <button class="disable-d1">Disable</button>
71 <button class="enable-d1">Enable</button>
72 <button class="destroy-d1">Destroy</button>
73
74 Datepicker Simple
75 <div>
76 <input type="text" id="d1" />
77 </div>
78 </li>
79 <li class="plugin">
80 <button class="disable-d2">Disable</button>
81 <button class="enable-d2">Enable</button>
82 <button class="destroy-d2">Destroy</button>
83
84 Datepicker Multi
85 <div>
86 <input type="text" id="d2" />
87 </div>
88 </li>
89 <li class="plugin">
90 <button class="disable-inl">Disable</button>
91 <button class="enable-inl">Enable</button>
92 <button class="destroy-inl">Destroy</button>
93
94 Datepicker Inline
95 <div id="inl"></div>
96 </li>
97 <li class="plugin">
98 Datepicker disabled input
99 <div>
100 <input type="text" id="d3" disabled="disabled" />
101 </div>
102 </li>
103 <li class="plugin" style="position: absolute; right: 0; bottom: 0; height: 40px">
104 Datepicker - positioned bottom-right
105 <div>
106 <input type="text" id="d4">
107 </div>
108 </li>
109</ul>
110
111</body>
112</html>
Note: See TracBrowser for help on using the repository browser.