r1338 - trunk/demos/datepicker
Author: fg.todd
Date: Tue Dec 30 08:45:42 2008
New Revision: 1338
Modified:
trunk/demos/datepicker/buttonbar.html
trunk/demos/datepicker/default.html
trunk/demos/datepicker/dropdown_month_year.html
trunk/demos/datepicker/inline.html
trunk/demos/datepicker/multiple_calendars.html
Log:
Added wrappers for demo and description for each page.
Modified: trunk/demos/datepicker/buttonbar.html
==============================================================================
--- trunk/demos/datepicker/buttonbar.html (original)
+++ trunk/demos/datepicker/buttonbar.html Tue Dec 30 08:45:42 2008
@@ -15,9 +15,20 @@
</head>
<body>
+<div class="demo">
Date: <input type="text" id="date123">
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+This example adds a bar at the bottom of the calendar with buttons for
selecting Today's date and a Done button for closing the calendar. The
individual buttons are on by default if the bar is added but each can be
turned off via options. The button text is customizable.
+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/datepicker/default.html
==============================================================================
--- trunk/demos/datepicker/default.html (original)
+++ trunk/demos/datepicker/default.html Tue Dec 30 08:45:42 2008
@@ -15,7 +15,19 @@
</head>
<body>
+<div class="demo">
+
Date: <input type="text" id="date123" />
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+This is a default datepicker which is tied to a standard form input.
The calendar opens in a small overlay onFocus and closes automatically
onBlur if a date if selected.
+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/datepicker/dropdown_month_year.html
==============================================================================
--- trunk/demos/datepicker/dropdown_month_year.html (original)
+++ trunk/demos/datepicker/dropdown_month_year.html Tue Dec 30 08:45:42 2008
@@ -15,9 +15,19 @@
</head>
<body>
+<div class="demo">
Date: <input type="text" id="date123">
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+This datepicker has an optional month and year dropdown added to make
it easier to navigate through large timeframes. This is done by adding the
changeMonth:true and changeYear:true options.
+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/datepicker/inline.html
==============================================================================
--- trunk/demos/datepicker/inline.html (original)
+++ trunk/demos/datepicker/inline.html Tue Dec 30 08:45:42 2008
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Datepicker - Default Demo</title>
+ <title>jQuery UI Datepicker - Inline Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
@@ -16,7 +16,19 @@
<body>
+<div class="demo">
+
Date: <div id="date123" /></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+This is an example of an inline date picker that is embedded in the
page instead of opening in an overlay. This is done by
calling .datepicker() in a div instead of an input.
+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/datepicker/multiple_calendars.html
==============================================================================
--- trunk/demos/datepicker/multiple_calendars.html (original)
+++ trunk/demos/datepicker/multiple_calendars.html Tue Dec 30 08:45:42 2008
@@ -9,15 +9,25 @@
<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
<script type="text/javascript">
$(function() {
- $('#date123').datepicker({numberOfMonths: 3, showButtonPanel: true});
+ $('#date123').datepicker({numberOfMonths: 2, showButtonPanel: true});
});
</script>
</head>
<body>
+<div class="demo">
Date: <input type="text" id="date123">
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+This datepicker shows two months at a time by setting the
numberOfMonths option to 2. This can be set to any number that will fit
within your layout. The multiple calendars are used to make it easier to
visually scan across months and make a selection. This is not a date range
picker. In a future release, a custom date range plugin will be added. For
users that want to use the old date range picker built into the datepicker,
they must use the previous version of this plug.
+
+</div><!-- End demo-description -->
</body>