Changeset 4500

Timestamp:

01/21/08 12:22:09 (1 year ago)

Author:

kbwood.au

Message:

Refactor datepicker functions
Demonstrate removeDatepicker, showAnim

Files:

• trunk/ui/current/datepicker/index.html (modified) (18 diffs)

trunk/ui/current/datepicker/index.html

@@ -46 +46 @@
                     <li><a href="#l10n">Localisation</a></li>
                     <li style="clear: left;"><a href="#range">Date range</a></li>
-                    <li><a href="#misc">Miscellaneous</a></li>
+                    <li><a href="#misc1">Misc. 1</a></li>
+                    <li><a href="#misc2">Misc. 2</a></li>
                     <li><a href="#change">Change Settings</a></li>
                     <li><a href="#inline">Inline</a></li>
@@ -137 +138 @@
 <script type="text/jsdemo" charset="utf-8" class="demojs">
 $('#button1').click(function() { 
-    $.datepicker.showFor('#invokeFocus');
+    $('#invokeFocus').showDatepicker();
 }); 
 </script>   
@@ -198 +199 @@
                         <input type="text" size="10" id="relativeDates"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#relativeDates').datepicker({minDate: 0, maxDate: 365});
+$('#relativeDates').attachDatepicker({minDate: 0, maxDate: 365});
 </script>
                     <p>The relative dates can also be specified as a number and a period -
@@ -205 +206 @@
                         <input type="text" size="10" id="extendedDates"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#extendedDates').datepicker({minDate: '-1d', maxDate: '6y'});
+$('#extendedDates').attachDatepicker({minDate: '-1d', maxDate: '6y'});
 </script>
                     <p>Note that the range of selectable months and years changes appropriately. Also,
@@ -337 +338 @@
                     <p><span class="demoLabel">
                         <select class="languageSelect">
-                            <option value="he">&#1506;&#1489;&#1512;&#1497;&#1514; (Hebrew)</option>
+                            <option value="he" selected="selected">&#1506;&#1489;&#1512;&#1497;&#1514; (Hebrew)</option>
                         </select>:</span>
                         <input type="text" size="10" id="rtlDatepicker"/></p>
@@ -367 +368 @@
 // Customize two date pickers to work as a date range
 function customRange(input) {
-    return {minDate: (input.id == 'dTo' ? $.datepicker.getDateFor('#dFrom') : null),
-        maxDate: (input.id == 'dFrom' ? $.datepicker.getDateFor('#dTo') : null)};
+    return {minDate: (input.id == 'dTo' ? $('#dFrom').getDatepickerDate() : null),
+        maxDate: (input.id == 'dFrom' ? $('#dTo').getDatepickerDate() : null)};
 }
 </script>
@@ -392 +393 @@
 </script>
                 </div>
-                <div id="misc" class="tab_group1 container">
-                    <h3>Miscellaneous</h3>
+                <div id="misc1" class="tab_group1 container">
+                    <h3>Miscellaneous 1</h3>
                     <p>Set the date shown when first opening the date picker. The default is today.</p>
                     <p><span class="demoLabel">Open at 01-Jan-2007:</span>
@@ -410 +411 @@
                         <input type="text" size="10" id="openDate2Weeks"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#openDate2Weeks').datepicker({defaultDate: '2w'});
+$('#openDate2Weeks').attachDatepicker({defaultDate: '2w'});
 </script>
                     <p>Show the weeks of the year. Defaults to the ISO 8601 definition (weeks start 
@@ -452 +453 @@
         (today.getTime() == date.getTime() ? ' (today)' : '');
 }
+</script>
+                </div>
+                <div id="misc2" class="tab_group1 container">
+                    <h3>Miscellaneous 2</h3>
+                    <p>Remove the datepicker if you've finished with it.</p>
+                    <p><span class="demoLabel">Remove popup datepicker:</span>
+                        <input type="text" size="10" class="removeDatepicker"/><button id="removeButton">Remove</button></p>
+                    <p><span class="demoLabel">Remove inline datepicker:</span>
+                        <span class="removeDatepicker"></span></p>
+<script type="text/jsdemo" charset="utf-8" class="demojs">
+var opts = {beforeShowDay: $.datepicker.noWeekends};
+$('.removeDatepicker').attachDatepicker(opts);
+$('#removeButton').toggle(function() {
+        $(this).text('Re-attach');
+        $('.removeDatepicker').removeDatepicker();
+    },
+    function() {
+        $(this).text('Remove');
+        $('.removeDatepicker').attachDatepicker(opts);
+    }
+);
 </script>
                     <p><strong>(Advanced Technique)</strong><br />Connect the date picker to linked drop-downs. You still need an input field,
@@ -525 +547 @@
                 <div id="change" class="tab_group1 container">
                     <h3>Changing Settings</h3>
-                    <p>If necessary, the datepicker settings for an input (or set of inputs) can be changed
-                        on the fly. As an example, here we change the speed at which the datepicker appears.</p>
-                    <p><span class="demoLabel">Display speed:</span>
-                        <select id="speedSelectr">
+                    <p>If necessary, the datepicker settings for an input (or set of inputs) 
+                        can be changed on the fly. As an example, here we change the 
+                        animation and speed at which the datepicker appears.</p>
+                    <p><span class="demoLabel">Display animation and speed:</span>
+                        <select id="animSelector">
+                            <option value="show">show</option>
+                            <option value="fadeIn">fade in</option>
+                            <option value="slideDown">slide down</option>
+                        </select>
+                        <select id="speedSelector">
                             <option value="">immediate</option>
                             <option value="slow">slow</option>
@@ -541 +569 @@
 $('#changeDP').attachDatepicker();
 // Change the datepicker to selected speed.
-$("#speedSelectr").change(function() {
-    $('#changeDP').changeDatepicker({speed: $(this).val()});
+$("#animSelector,#speedSelector").change(function() {
+    $('#changeDP').changeDatepicker({'showAnim': $('#animSelector').val(),
+        'speed': $('#speedSelector').val()});
 });
 </script>
@@ -602 +631 @@
 // Display the date range from a multi-month inline date picker
 function updateInlineRange(dateStr) {
-    var dates = $.datepicker.getDateFor('#rangeInline');
+    var dates = $('#rangeInline').getDatepickerDate();
     var dateFormat = $.datepicker.regional[''].dateFormat;
     $('#inlineRange').val(dateStr ? dateStr :
@@ -624 +653 @@
 $("#setInlineRange").click(function() {
     // Set Inline Date Range Selection
-    $.datepicker.setDateFor('#rangeInline', lastWeek, nextWeek);
+    $('#rangeInline').setDatepickerDate(lastWeek, nextWeek);
     
     // Update text field with current date selections
-    var dates = $.datepicker.getDateFor('#rangeInline');
+    var dates = $('#rangeInline').getDatepickerDate();
     var dateFormat = $.datepicker.regional[''].dateFormat;
     $('#inlineRange').val($.datepicker.formatDate(dateFormat, dates[0]) + ' to ' +
@@ -688 +717 @@
                 <div id="compat" class="tab_group1 container">
                     <h3>Compatibility</h3>
+                    <h4>v2.x to v3.3</h4>
                     <p>The date picker has been refactored to better fit
                         within the <a href="http://ui.jquery.com">jQuery UI</a> project.
@@ -700 +730 @@
 &lt;script type="text/javascript" src="<b>ui.datepicker.js</b>"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="<b>jquery-calendar-compatibility.js</b>"&gt;&lt;/script&gt;</code></pre>
-                    <p>Download the <a href="compatibility/jquery-calendar-compatibility.js" target="_blank">jquery-calendar-compatibility.js</a></p>
+                    <p>Download the <a href="compatibility/jquery-calendar-compatibility.js" target="_blank">jquery-calendar-compatibility.js</a> module.</p>
                     <p>To migrate fully, the following steps need to be taken:</p>
                     <ul>
-                        <li>Replace references to the <code>datepicker</code>
-                            with <code>attachDatepicker</code>.</li>
-                        <li>Replace references to the <code>$.datpicker.reconfigureFor</code>
-                            with <code>changeDatepicker</code>.</li>
-                        <li>Replace references to the <code>$.datpicker.enableFor</code>
-                            with <code>enableDatepicker</code>.</li>
-                        <li>Replace references to the <code>$.datpicker.disableFor</code>
-                            with <code>disableDatepicker</code>.</li>
                         <li>Replace references to the <code>jquery-calendar*</code>
                             files with <code>ui.datepicker*</code>.</li>
@@ -716 +738 @@
                             object with <code>$.datepicker</code>.</li>
                         <li>Replace references to the <code>calendar</code>
-                            function with <code>datepicker</code>.</li>
+                            function with <code>attachDatepicker</code>.</li>
                         <li>Replace references to the <code>autoPopUp</code>
                             setting with <code>showOn</code>.</li>
@@ -729 +751 @@
                         <li>Replace references to the <code>dialogCalendar</code>
                             function with <code>dialogDatepicker</code>.</li>
+                        <li>Replace references to the <code>$.datepicker.reconfigureFor(selector, ...)</code>
+                            function with <code>$(selector).changeDatepicker(...)</code>.</li>
+                        <li>Replace references to the <code>$.datepicker.enableFor(selector)</code>
+                            function with <code>$(selector).enableDatepicker()</code>.</li>
+                        <li>Replace references to the <code>$.datepicker.disableFor(selector)</code>
+                            function with <code>$(selector).disableDatepicker()</code>.</li>
+                        <li>Replace references to the <code>$.datepicker.getDateFor(selector)</code>
+                            function with <code>$(selector).getDatepickerDate()</code>.</li>
+                        <li>Replace references to the <code>$.datepicker.setDateFor(selector, ...)</code>
+                            function with <code>$(selector).setDatepickerDate(...)</code>.</li>
                         <li>Replace references to the <code>calendar*</code>
                             CSS styles with <code>datepicker*</code>.</li>
@@ -742 +774 @@
     
 &lt;input type="text" id="inlineConfig" <b>date:</b>defaultDate="+7"/&gt;</code></pre>
+                    <h4>v3.2 to v3.3</h4>
+                    <p>To align the datepicker more closely with other jQuery UI components,
+                    further changes were made in v3.3, resulting in another compatibility module.</p>
+                    <p>Users of v3.2 of the datepicker should use the following
+                        header code to work with their existing implementation:</p>
+<pre><code class="html">&lt;link rel="stylesheet" type="text/css" href="<b>ui.datepicker.css</b>"/&gt;
+&lt;script type="text/javascript" src="<b>ui.datepicker.js</b>"&gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="<b>ui.datepicker.compatibility-3.2.js</b>"&gt;&lt;/script&gt;</code></pre>
+                    <p>Download the <a href="compatibility/ui.datepicker.compatibility-3.2.js" target="_blank">ui.datepicker.compatibility-3.2.js</a> module.</p>
+                    <p>To migrate fully, the following steps need to be taken:</p>
+                    <ul>
+                        <li>Replace references to the <code>datepicker</code>
+                            function with <code>attachDatepicker</code>.</li>
+                        <li>Replace references to the <code>$.datepicker.reconfigureFor(selector, ...)</code>
+                            function with <code>$(selector).changeDatepicker(...)</code>.</li>
+                        <li>Replace references to the <code>$.datepicker.enableFor(selector)</code>
+                            function with <code>$(selector).enableDatepicker()</code>.</li>
+                        <li>Replace references to the <code>$.datepicker.disableFor(selector)</code>
+                            function with <code>$(selector).disableDatepicker()</code>.</li>
+                        <li>Replace references to the <code>$.datepicker.getDateFor(selector)</code>
+                            function with <code>$(selector).getDatepickerDate()</code>.</li>
+                        <li>Replace references to the <code>$.datepicker.setDateFor(selector, ...)</code>
+                            function with <code>$(selector).setDatepickerDate(...)</code>.</li>
+                    </ul>
+                    <p>For example, this old style code:</p>
+<pre><code class="javascript">$('inputs').<b>datepicker</b>();
+$.<b>datepicker.reconfigureFor</b>('inputs', {...});</code></pre>
+                    <p>becomes:</p>
+<pre><code class="javascript">$('inputs').<b>attachDatepicker</b>();
+$('input').<b>changeDatepicker</b>({...});</code></pre>
                 </div>
 <!--DEMO