aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/demos/datepicker
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/demos/datepicker')
-rw-r--r--static/development-bundle/demos/datepicker/alt-field.html31
-rw-r--r--static/development-bundle/demos/datepicker/buttonbar.html33
-rw-r--r--static/development-bundle/demos/datepicker/date-formats.html43
-rw-r--r--static/development-bundle/demos/datepicker/default.html31
-rw-r--r--static/development-bundle/demos/datepicker/dropdown-month-year.html34
-rw-r--r--static/development-bundle/demos/datepicker/icon-trigger.html31
-rw-r--r--static/development-bundle/demos/datepicker/images/calendar.gifbin0 -> 269 bytes
-rw-r--r--static/development-bundle/demos/datepicker/index.html26
-rw-r--r--static/development-bundle/demos/datepicker/inline.html31
-rw-r--r--static/development-bundle/demos/datepicker/localization.html120
-rw-r--r--static/development-bundle/demos/datepicker/min-max.html31
-rw-r--r--static/development-bundle/demos/datepicker/multiple-calendars.html34
12 files changed, 445 insertions, 0 deletions
diff --git a/static/development-bundle/demos/datepicker/alt-field.html b/static/development-bundle/demos/datepicker/alt-field.html
new file mode 100644
index 0000000..372e2bf
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/alt-field.html
@@ -0,0 +1,31 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker - Populate alternate field</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <script type="text/javascript">
11 $(function() {
12 $("#datepicker").datepicker({altField: '#alternate', altFormat: 'DD, d MM, yy'});
13 });
14 </script>
15</head>
16<body>
17
18<div class="demo">
19
20<p>Date: <input type="text" id="datepicker">&nbsp;<input type="text" id="alternate" size="30"/></p>
21
22</div><!-- End demo -->
23
24<div class="demo-description">
25
26<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p>
27
28</div><!-- End demo-description -->
29
30</body>
31</html>
diff --git a/static/development-bundle/demos/datepicker/buttonbar.html b/static/development-bundle/demos/datepicker/buttonbar.html
new file mode 100644
index 0000000..eeea08a
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/buttonbar.html
@@ -0,0 +1,33 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker - Display button bar</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <script type="text/javascript">
11 $(function() {
12 $('#datepicker').datepicker({
13 showButtonPanel: true
14 });
15 });
16 </script>
17</head>
18<body>
19
20<div class="demo">
21
22<p>Date: <input type="text" id="datepicker"></p>
23
24</div><!-- End demo -->
25
26<div class="demo-description">
27
28<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p>
29
30</div><!-- End demo-description -->
31
32</body>
33</html>
diff --git a/static/development-bundle/demos/datepicker/date-formats.html b/static/development-bundle/demos/datepicker/date-formats.html
new file mode 100644
index 0000000..a8712ec
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/date-formats.html
@@ -0,0 +1,43 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker - Format date</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <script type="text/javascript">
11 $(function() {
12 $("#datepicker").datepicker();
13 $("#format").change(function() { $('#datepicker').datepicker('option', {dateFormat: $(this).val()}); });
14 });
15 </script>
16</head>
17<body>
18
19<div class="demo">
20
21<p>Date: <input type="text" id="datepicker" size="30"/></p>
22
23<p>Format options:<br />
24 <select id="format">
25 <option value="mm/dd/yy">Default - mm/dd/yy</option>
26 <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
27 <option value="d M, y">Short - d M, yy</option>
28 <option value="d MM, y">Medium - d MM, yy</option>
29 <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
30 <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
31 </select>
32</p>
33
34</div><!-- End demo -->
35
36<div class="demo-description">
37
38<p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p>
39
40</div><!-- End demo-description -->
41
42</body>
43</html>
diff --git a/static/development-bundle/demos/datepicker/default.html b/static/development-bundle/demos/datepicker/default.html
new file mode 100644
index 0000000..368e0bc
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/default.html
@@ -0,0 +1,31 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker - Default functionality</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <script type="text/javascript">
11 $(function() {
12 $("#datepicker").datepicker();
13 });
14 </script>
15</head>
16<body>
17
18<div class="demo">
19
20<p>Date: <input type="text" id="datepicker"></p>
21
22</div><!-- End demo -->
23
24<div class="demo-description">
25
26<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
27
28</div><!-- End demo-description -->
29
30</body>
31</html>
diff --git a/static/development-bundle/demos/datepicker/dropdown-month-year.html b/static/development-bundle/demos/datepicker/dropdown-month-year.html
new file mode 100644
index 0000000..c169310
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/dropdown-month-year.html
@@ -0,0 +1,34 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker - Display month &amp; year menus</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <script type="text/javascript">
11 $(function() {
12 $('#datepicker').datepicker({
13 changeMonth: true,
14 changeYear: true
15 });
16 });
17 </script>
18</head>
19<body>
20
21<div class="demo">
22
23<p>Date: <input type="text" id="datepicker"></p>
24
25</div><!-- End demo -->
26
27<div class="demo-description">
28
29<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
30
31</div><!-- End demo-description -->
32
33</body>
34</html>
diff --git a/static/development-bundle/demos/datepicker/icon-trigger.html b/static/development-bundle/demos/datepicker/icon-trigger.html
new file mode 100644
index 0000000..5b4de4a
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/icon-trigger.html
@@ -0,0 +1,31 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker - Icon trigger</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <script type="text/javascript">
11 $(function() {
12 $("#datepicker").datepicker({showOn: 'button', buttonImage: 'images/calendar.gif', buttonImageOnly: true});
13 });
14 </script>
15</head>
16<body>
17
18<div class="demo">
19
20<p>Date: <input type="text" id="datepicker"></p>
21
22</div><!-- End demo -->
23
24<div class="demo-description">
25
26<p>Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.</p>
27
28</div><!-- End demo-description -->
29
30</body>
31</html>
diff --git a/static/development-bundle/demos/datepicker/images/calendar.gif b/static/development-bundle/demos/datepicker/images/calendar.gif
new file mode 100644
index 0000000..d0abaa7
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/images/calendar.gif
Binary files differ
diff --git a/static/development-bundle/demos/datepicker/index.html b/static/development-bundle/demos/datepicker/index.html
new file mode 100644
index 0000000..dfe22db
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/index.html
@@ -0,0 +1,26 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker Demos</title>
5 <link type="text/css" href="../demos.css" rel="stylesheet" />
6</head>
7<body>
8
9<div class="demos-nav">
10 <h4>Examples</h4>
11 <ul>
12 <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13 <li><a href="date-formats.html">Format date</a></li>
14 <li><a href="min-max.html">Restrict date range</a></li>
15 <li><a href="localization.html">Localize calendar</a></li>
16 <li><a href="alt-field.html">Populate alternate field</a></li>
17 <li><a href="inline.html">Display inline</a></li>
18 <li><a href="buttonbar.html">Display button bar</a></li>
19 <li><a href="dropdown-month-year.html">Display month &amp; year menus</a></li>
20 <li><a href="multiple-calendars.html">Display multiple months</a></li>
21 <li><a href="icon-trigger.html">Icon trigger</a></li>
22 </ul>
23</div>
24
25</body>
26</html>
diff --git a/static/development-bundle/demos/datepicker/inline.html b/static/development-bundle/demos/datepicker/inline.html
new file mode 100644
index 0000000..2d5ad75
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/inline.html
@@ -0,0 +1,31 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker - Display inline</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <script type="text/javascript">
11 $(function() {
12 $("#datepicker").datepicker();
13 });
14 </script>
15</head>
16<body>
17
18<div class="demo">
19
20Date: <div id="datepicker"></div>
21
22</div><!-- End demo -->
23
24<div class="demo-description">
25
26<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p>
27
28</div><!-- End demo-description -->
29
30</body>
31</html>
diff --git a/static/development-bundle/demos/datepicker/localization.html b/static/development-bundle/demos/datepicker/localization.html
new file mode 100644
index 0000000..39bc660
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/localization.html
@@ -0,0 +1,120 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker - Localize calendar</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
9 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-ar.js"></script>
10 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-bg.js"></script>
11 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-ca.js"></script>
12 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-cs.js"></script>
13 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-da.js"></script>
14 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-de.js"></script>
15 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-el.js"></script>
16 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-eo.js"></script>
17 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-es.js"></script>
18 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-fa.js"></script>
19 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-fi.js"></script>
20 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-fr.js"></script>
21 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-he.js"></script>
22 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-hr.js"></script>
23 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-hu.js"></script>
24 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-hy.js"></script>
25 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-id.js"></script>
26 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-is.js"></script>
27 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-it.js"></script>
28 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-ja.js"></script>
29 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-ko.js"></script>
30 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-lt.js"></script>
31 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-lv.js"></script>
32 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-ms.js"></script>
33 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-nl.js"></script>
34 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-no.js"></script>
35 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-pl.js"></script>
36 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-pt-BR.js"></script>
37 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-ro.js"></script>
38 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-ru.js"></script>
39 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-sk.js"></script>
40 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-sl.js"></script>
41 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-sq.js"></script>
42 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-sr.js"></script>
43 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-sr-SR.js"></script>
44 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-sv.js"></script>
45 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-th.js"></script>
46 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-tr.js"></script>
47 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-uk.js"></script>
48 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-zh-CN.js"></script>
49 <script type="text/javascript" src="../../ui/i18n/ui.datepicker-zh-TW.js"></script>
50 <link type="text/css" href="../demos.css" rel="stylesheet" />
51 <script type="text/javascript">
52 $(function() {
53 $.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
54 $("#datepicker").datepicker($.datepicker.regional['fr']);
55 $("#locale").change(function() {
56 $('#datepicker').datepicker('option', $.extend({showMonthAfterYear: false},
57 $.datepicker.regional[$(this).val()]));
58 });
59 });
60 </script>
61</head>
62<body>
63
64<div class="demo">
65
66<p>Date: <input type="text" id="datepicker"/>&nbsp;
67 <select id="locale">
68 <option value="sq">Albanian (Gjuha shqipe)</option>
69 <option value="ar">Arabic (&#8235;(&#1604;&#1593;&#1585;&#1576;&#1610;</option>
70 <option value="hy">Armenian (&#1344;&#1377;&#1397;&#1381;&#1408;&#1381;&#1398;)</option>
71 <option value="bg">Bulgarian (&#1073;&#1098;&#1083;&#1075;&#1072;&#1088;&#1089;&#1082;&#1080; &#1077;&#1079;&#1080;&#1082;)</option>
72 <option value="ca">Catalan (Catal&agrave;)</option>
73 <option value="zh-CN">Chinese Simplified (&#31616;&#20307;&#20013;&#25991;)</option>
74 <option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option>
75 <option value="hr">Croatian (Hrvatski jezik)</option>
76 <option value="cs">Czech (Ce&ouml;tina)</option>
77 <option value="da">Danish (Dansk)</option>
78 <option value="nl">Dutch (Nederlands)</option>
79 <option value="eo">Esperanto</option>
80 <option value="fa">Farsi/Persian (&#8235;(&#1601;&#1575;&#1585;&#1587;&#1740;</option>
81 <option value="fi">Finnish (suomi)</option>
82 <option value="fr" selected="selected">French (Fran&ccedil;ais)</option>
83 <option value="de">German (Deutsch)</option>
84 <option value="el">Greek (&#917;&#955;&#955;&#951;&#957;&#953;&#954;&#940;)</option>
85 <option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</option>
86 <option value="hu">Hungarian (Magyar)</option>
87 <option value="is">Icelandic (&Otilde;slenska)</option>
88 <option value="id">Indonesian (Bahasa Indonesia)</option>
89 <option value="it">Italian (Italiano)</option>
90 <option value="ja">Japanese (&#26085;&#26412;&#35486;)</option>
91 <option value="ko">Korean (&#54620;&#44397;&#50612;)</option>
92 <option value="lv">Latvian (Latvie&ouml;u Valoda)</option>
93 <option value="lt">Lithuanian (lietuviu kalba)</option>
94 <option value="ms">Malaysian (Bahasa Malaysia)</option>
95 <option value="no">Norwegian (Norsk)</option>
96 <option value="pl">Polish (Polski)</option>
97 <option value="pt-BR">Portuguese/Brazilian (Portugu&ecirc;s)</option>
98 <option value="ro">Romanian (Rom&acirc;n&#259;)</option>
99 <option value="ru">Russian (&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;)</option>
100 <option value="sr">Serbian (&#1089;&#1088;&#1087;&#1089;&#1082;&#1080; &#1112;&#1077;&#1079;&#1080;&#1082;)</option>
101 <option value="sr-SR">Serbian (srpski jezik)</option>
102 <option value="sk">Slovak (Slovencina)</option>
103 <option value="sl">Slovenian (Slovenski Jezik)</option>
104 <option value="es">Spanish (Espa&ntilde;ol)</option>
105 <option value="sv">Swedish (Svenska)</option>
106 <option value="th">Thai (&#3616;&#3634;&#3625;&#3634;&#3652;&#3607;&#3618;)</option>
107 <option value="tr">Turkish (T&uuml;rk&ccedil;e)</option>
108 <option value="uk">Ukranian (&#1059;&#1082;&#1088;&#1072;&#1111;&#1085;&#1089;&#1100;&#1082;&#1072;)</option>
109 </select></p>
110
111</div><!-- End demo -->
112
113<div class="demo-description">
114
115<p>Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p>
116
117</div><!-- End demo-description -->
118
119</body>
120</html>
diff --git a/static/development-bundle/demos/datepicker/min-max.html b/static/development-bundle/demos/datepicker/min-max.html
new file mode 100644
index 0000000..06a1776
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/min-max.html
@@ -0,0 +1,31 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker - Restrict date range</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <script type="text/javascript">
11 $(function() {
12 $("#datepicker").datepicker({minDate: -20, maxDate: '+1M +10D'});
13 });
14 </script>
15</head>
16<body>
17
18<div class="demo">
19
20<p>Date: <input type="text" id="datepicker"></p>
21
22</div><!-- End demo -->
23
24<div class="demo-description">
25
26<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p>
27
28</div><!-- End demo-description -->
29
30</body>
31</html>
diff --git a/static/development-bundle/demos/datepicker/multiple-calendars.html b/static/development-bundle/demos/datepicker/multiple-calendars.html
new file mode 100644
index 0000000..86e55a0
--- /dev/null
+++ b/static/development-bundle/demos/datepicker/multiple-calendars.html
@@ -0,0 +1,34 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Datepicker - Display multiple months</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <script type="text/javascript">
11 $(function() {
12 $('#datepicker').datepicker({
13 numberOfMonths: 3,
14 showButtonPanel: true
15 });
16 });
17 </script>
18</head>
19<body>
20
21<div class="demo">
22
23<p>Date: <input type="text" id="datepicker"></p>
24
25</div><!-- End demo -->
26
27<div class="demo-description">
28
29<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p>
30
31</div><!-- End demo-description -->
32
33</body>
34</html>
© 2015 Mike Crute