Changeset 4490

Timestamp:

01/20/08 22:20:24 (1 year ago)

Author:

grabanski

Message:

The following changes were made to the core for the next jQuery UI release:
* Changed $(selector).datepicker() to $(selector).attachDatepicker().
* Changed $.Datepicker.enableFor(control) to $(selector).enableDatepicker().
* Changed $.Datepicker.disableFor(control) to $(selector).disableDatepicker().
* Changed $.Datepicker.reconfigureFor(control, settings) to $(selector).changeDatepicker(settings).
* Updated compatibility file to reflect changes.

Location:

trunk/ui/current/datepicker

Files:

• compatibility/jquery-calendar-compatibility.js (modified) (6 diffs)
• compatibility/jquery-calendar-demo.js (modified) (3 diffs)
• core/index.html (modified) (1 diff)
• core/ui.datepicker.js (modified) (4 diffs)
• demo/ui.datepicker.demo.js (modified) (1 diff)
• index.html (modified) (28 diffs)

trunk/ui/current/datepicker/compatibility/jquery-calendar-compatibility.js

@@ -39 +39 @@
        @return void */
     enableFor: function(inputs) {
-        $.datepicker.enableFor(inputs);
+        $(inputs).enableDatepicker();
     },
 
@@ -48 +48 @@
        @return void */
     disableFor: function(inputs) {
-        $.datepicker.disableFor(inputs);
+        $(inputs).disableDatepicker();
     },
 
@@ -57 +57 @@
        @return void */
     reconfigureFor: function(control, settings) {
-        $.datepicker.reconfigureFor(control, convertSettings(settings));
+        $(control).changeDatepicker(convertSettings(settings));
     },
 
@@ -99 +99 @@
     noWeekends: function(date) {
         return $.datepicker.noWeekends(date);
+    },
+    
+    /* Format a date object into a string value.
+       @param  date  Date - the date to customise */
+    formatDate: function(date) {
+        return $.datepicker.formatDate(date);
     }
 });
@@ -125 +131 @@
    @param  settings  object - the new settings to use for this calendar instance (anonymous)
    @return jQuery object - for chaining further calls */
-$.fn.calendar = function(settings) {
+compatFunction = function(settings) {
     this.each(function() {
         for (attrName in $.datepicker._defaults) {
@@ -135 +141 @@
         }
     });
-    return this.datepicker(convertSettings(settings));
+    return this.attachDatepicker(convertSettings(settings));
 };
+$.fn.calendar = compatFunction;
+$.fn.datepicker = compatFunction;
 
 /* Initialise the calendar. */

trunk/ui/current/datepicker/compatibility/jquery-calendar-demo.js

@@ -3 +3 @@
 var inlineTo = null;
 
-$(document).ready(function () {
+$(function () {
     $('#alt').attr({ 'disabled':'disabled' });
     tabs.init();
@@ -153 +153 @@
     var dateFrom = popUpCal.getDateFor(inlineFrom);
     var dateTo = popUpCal.getDateFor(inlineTo);
-    $('#inlineRange').val(formatDate(dateFrom) + ' to ' + formatDate(dateTo));
+    $('#inlineRange').val(popUpCal.formatDate(dateFrom) + ' to ' + popUpCal.formatDate(dateTo));
     popUpCal.reconfigureFor(inlineFrom, {maxDate: dateTo});
     popUpCal.reconfigureFor(inlineTo, {minDate: dateFrom});
@@ -160 +160 @@
 function updateInlineRange2(dateStr) {
     $('#inlineRange2').val(dateStr ? dateStr :
-        formatDate(popUpCal.getDateFor('#rangeInline')));
-}
-
-function formatDate(date) {
-    var day = date.getDate();
-    var month = date.getMonth() + 1;
-    return (day < 10 ? '0' : '') + day + '/' +
-        (month < 10 ? '0' : '') + month + '/' + date.getFullYear();
+        popUpCal.formatDate(popUpCal.getDateFor('#rangeInline')));
 }
 

trunk/ui/current/datepicker/core/index.html

@@ -30 +30 @@
         <script type="text/javascript" charset="utf-8">
             jQuery(function($){
-                $("#dateinput").datepicker();
+                $("#dateinput").attachDatepicker();
             });
         </script>

trunk/ui/current/datepicker/core/ui.datepicker.js

@@ -288 +288 @@
     },
 
-    /* Enable the input field(s) for entry.
-       @param  inputs  element - single input field or
-                       string - the ID or other jQuery selector of the input field(s) or
-                       object - jQuery collection of input fields
-       @return the manager object */
-    enableFor: function(inputs) {
-        inputs = (inputs.jquery ? inputs : $(inputs));
-        inputs.each(function() {
-            this.disabled = false;
-            $(this).siblings('button.datepicker_trigger').each(function() { this.disabled = false; });
-            $(this).siblings('img.datepicker_trigger').css({opacity: '1.0', cursor: ''});
-            var $this = this;
-            $.datepicker._disabledInputs = $.map($.datepicker._disabledInputs,
-                function(value) { return (value == $this ? null : value); }); // delete entry
-        });
-        return this;
-    },
-
-    /* Disable the input field(s) from entry.
-       @param  inputs  element - single input field or
-                       string - the ID or other jQuery selector of the input field(s) or
-                       object - jQuery collection of input fields
-       @return the manager object */
-    disableFor: function(inputs) {
-        inputs = (inputs.jquery ? inputs : $(inputs));
-        inputs.each(function() {
-            this.disabled = true;
-            $(this).siblings('button.datepicker_trigger').each(function() { this.disabled = true; });
-            $(this).siblings('img.datepicker_trigger').css({opacity: '0.5', cursor: 'default'});
-            var $this = this;
-            $.datepicker._disabledInputs = $.map($.datepicker._disabledInputs,
-                function(value) { return (value == $this ? null : value); }); // delete entry
-            $.datepicker._disabledInputs[$.datepicker._disabledInputs.length] = this;
-        });
-        return this;
-    },
-
     /* Is the input field disabled?
        @param  input  element - single input field or
@@ -338 +301 @@
         }
         return false;
-    },
-
-    /* Update the settings for a date picker attached to an input field or division.
-       @param  control   element - the input field or div/span attached to the date picker or
-                         string - the ID or other jQuery selector of the input field or
-                         object - jQuery object for input field or div/span
-       @param  settings  object - the new settings to update
-       @return the manager object */
-    reconfigureFor: function(control, settings) {
-        control = (control.jquery ? control[0] :
-            (typeof control == 'string' ? $(control)[0] : control));
-        var inst = this._getInst(control._calId);
-        if (inst) {
-            extendRemove(inst._settings, settings || {});
-            this._updateDatepicker(inst);
-        }
-        return this;
     },
 
@@ -1476 +1422 @@
    @param  settings  object - the new settings to use for this date picker instance (anonymous)
    @return jQuery object - for chaining further calls */
-$.fn.datepicker = function(settings) {
+$.fn.attachDatepicker = function(settings) {
     return this.each(function() {
         // check for settings on the control itself - in namespace 'date:'
@@ -1509 +1455 @@
 };
 
+/* Enable the date picker to a jQuery selection.
+   @return jQuery object - for chaining further calls */
+$.fn.enableDatepicker = function() {
+    return this.each(function() {
+        this.disabled = false;
+        $(this).siblings('button.datepicker_trigger').each(function() { this.disabled = false; });
+        $(this).siblings('img.datepicker_trigger').css({opacity: '1.0', cursor: ''});
+        var $this = this;
+        $.datepicker._disabledInputs = $.map($.datepicker._disabledInputs,
+            function(value) { return (value == $this ? null : value); }); // delete entry
+    });
+}
+
+/* Disable the date picker to a jQuery selection.
+   @return jQuery object - for chaining further calls */
+$.fn.disableDatepicker = function() {
+    return this.each(function() {
+        this.disabled = true;
+        $(this).siblings('button.datepicker_trigger').each(function() { this.disabled = true; });
+        $(this).siblings('img.datepicker_trigger').css({opacity: '0.5', cursor: 'default'});
+        var $this = this;
+        $.datepicker._disabledInputs = $.map($.datepicker._disabledInputs,
+            function(value) { return (value == $this ? null : value); }); // delete entry
+        $.datepicker._disabledInputs[$.datepicker._disabledInputs.length] = this;
+    });
+}
+
+/* Update the settings for a date picker attached to an input field or division.
+       @param  settings  object - the new settings to update
+       @return jQuery object - for chaining further calls */
+$.fn.changeDatepicker = function(settings) {
+    return this.each(function() {
+        var inst = $.datepicker._getInst(this._calId);
+        if (inst) {
+            extendRemove(inst._settings, settings || {});
+            $.datepicker._updateDatepicker(inst);
+        }
+    });
+}
+    
 /* Initialise the date picker. */
 $(document).ready(function() {

trunk/ui/current/datepicker/demo/ui.datepicker.demo.js

@@ -17 +17 @@
     }
     // Stylesheets
-    $('#altStyle').datepicker({buttonImage: 'img/calendar2.gif',
+    $('#altStyle').attachDatepicker({buttonImage: 'img/calendar2.gif',
         prevText: '<img src="img/prev.gif" style="vertical-align: middle;"/> Prev',
         nextText: 'Next <img src="img/next.gif" style="vertical-align: middle;"/>'});

trunk/ui/current/datepicker/index.html

@@ -30 +30 @@
             <div id="header">
                 <div>
-                    <h1>jQuery UI Datepicker v3.2</h1>
+                    <h1>jQuery UI Datepicker v3.3</h1>
                     <p class="caption">Written by <a href="/">Marc Grabanski</a> and <a href="http://keith-wood.name">Keith Wood</a>.</p>
                 </div>
@@ -36 +36 @@
             <?php $code_nav='ui-datepicker'; include '../code_nav.php' ?>
             <div id="content">
-                <h2>jQuery UI Datepicker v3.2 Examples</h2>
+                <h2>jQuery UI Datepicker v3.3 Examples</h2>
                 <ul id="tab_menu1" class="tabs">
                     <li><a href="#default">Defaults</a></li>
@@ -47 +47 @@
                     <li style="clear: left;"><a href="#range">Date range</a></li>
                     <li><a href="#misc">Miscellaneous</a></li>
-                    <li><a href="#reconfig">Reconfigure</a></li>
+                    <li><a href="#change">Change Settings</a></li>
                     <li><a href="#inline">Inline</a></li>
                     <li><a href="#styles">Stylesheets</a></li>
@@ -59 +59 @@
                         <input type="text" size="30" value="click to show datepicker" id="defaultFocus"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#defaultFocus').datepicker();    
+$('#defaultFocus').attachDatepicker();  
 </script>
                     <p><span class="demoLabel">IE select issue:</span>
@@ -96 +96 @@
                         <input type="button" id="enableFocus" value="Disable"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#invokeFocus').datepicker({showOn: 'focus'});    
+$('#invokeFocus').attachDatepicker({showOn: 'focus'});  
 </script>
                     <p><span class="demoLabel">Appears via text button:</span>
@@ -102 +102 @@
                         <input type="button" id="enableButton" value="Disable"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#invokeButton').datepicker({showOn: 'button', buttonText: '...',
+$('#invokeButton').attachDatepicker({showOn: 'button', buttonText: '...',
     buttonImage: '', buttonImageOnly: false});
 </script>
@@ -109 +109 @@
                         <input type="button" id="enableBoth" value="Disable"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('.invokeBoth').datepicker({showOn: 'both', buttonImage: 'img/calendar.gif', buttonImageOnly: true});
+$('.invokeBoth').attachDatepicker({showOn: 'both', buttonImage: 'img/calendar.gif', buttonImageOnly: true});
 </script>
                     <p>You can embed the trigger image within the input area via CSS.</p>
@@ -115 +115 @@
                         <input type="text" size="10" id="embedButton"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#embedButton').datepicker({showOn: 'button', buttonImage: 'img/calendar.gif', buttonImageOnly: true});
+$('#embedButton').attachDatepicker({showOn: 'button', buttonImage: 'img/calendar.gif', buttonImageOnly: true});
 
 // CSS
@@ -123 +123 @@
 <script type="text/jsdemo" charset="utf-8" class="demojs">
 $('#enableFocus').toggle(
-    function () { this.value = 'Enable'; $.datepicker.disableFor('#invokeFocus'); },
-    function () { this.value = 'Disable'; $.datepicker.enableFor('#invokeFocus'); });
+    function () { this.value = 'Enable'; $('#invokeFocus').disableDatepicker(); },
+    function () { this.value = 'Disable'; $('#invokeFocus').enableDatepicker(); });
 $('#enableButton').toggle(
-    function () { this.value = 'Enable'; $.datepicker.disableFor($('#invokeButton')); },
-    function () { this.value = 'Disable'; $.datepicker.enableFor($('#invokeButton')); });
+    function () { this.value = 'Enable'; $('#invokeButton').disableDatepicker(); },
+    function () { this.value = 'Disable'; $('#invokeButton').enableDatepicker(); });
 $('#enableBoth').toggle(
-    function () { this.value = 'Enable'; $.datepicker.disableFor($('.invokeBoth')[0]); },
-    function () { this.value = 'Disable'; $.datepicker.enableFor($('.invokeBoth')[0]); });
+    function () { this.value = 'Enable'; $('.invokeBoth:first').disableDatepicker(); },
+    function () { this.value = 'Disable'; $('.invokeBoth:first').enableDatepicker(); });
 </script>
                     <p>The date picker can also be triggered externally for a particular input.</p>
@@ -182 +182 @@
                         <input type="text" size="10" id="restrictControls"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#restrictControls').datepicker({firstDay: 1, changeFirstDay: false,
+$('#restrictControls').attachDatepicker({firstDay: 1, changeFirstDay: false,
     changeMonth: false, changeYear: false});
 </script>
@@ -190 +190 @@
                         <input type="text" size="10" id="restrictDates"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#restrictDates').datepicker({minDate: new Date(2005, 1 - 1, 26),
+$('#restrictDates').attachDatepicker({minDate: new Date(2005, 1 - 1, 26),
     maxDate: new Date(2007, 1 - 1, 26)});
 </script>
@@ -220 +220 @@
                         <input type="text" size="10" id="mediumFormat"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#mediumFormat').datepicker({dateFormat: 'M d, yy'});
+$('#mediumFormat').attachDatepicker({dateFormat: 'M d, yy'});
 </script>
                     <p><span class="demoLabel">Long format:</span>
                         <input type="text" size="20" id="longFormat"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#longFormat').datepicker({dateFormat: 'MM d, yy'});
+$('#longFormat').attachDatepicker({dateFormat: 'MM d, yy'});
 </script>
                     <p><span class="demoLabel">Full format:</span>
                         <input type="text" size="30" id="fullFormat"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#fullFormat').datepicker({dateFormat: 'DD, MM d, yy'});
+$('#fullFormat').attachDatepicker({dateFormat: 'DD, MM d, yy'});
 </script>
                     <p>Display dates without the century. The century is then determined based on the
@@ -239 +239 @@
                         <input type="text" size="10" id="noCentury"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#noCentury').datepicker({dateFormat: 'dd/mm/y'});
+$('#noCentury').attachDatepicker({dateFormat: 'dd/mm/y'});
 </script>
                     <p><span class="demoLabel">ISO date format:</span>
                         <input type="text" size="10" id="isoFormat"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#isoFormat').datepicker({dateFormat: 'yy-mm-dd'});
+$('#isoFormat').attachDatepicker({dateFormat: 'yy-mm-dd'});
 </script>
                     <p><span class="demoLabel">French full format:</span>
                         <input type="text" size="30" id="frFullFormat"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#frFullFormat').datepicker($.datepicker.regional['fr']);
-$.datepicker.reconfigureFor('#frFullFormat', {dateFormat: 'DD, MM d, yy'});
+$('#frFullFormat').attachDatepicker($.datepicker.regional['fr']);
+$('#frFullFormat').changeDatepicker({dateFormat: 'DD, MM d, yy'});
 </script>
                     <p>The formatting codes are:</p>
@@ -278 +278 @@
                         <input type="text" size="10" id="noWeekends"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#noWeekends').datepicker({beforeShowDay: $.datepicker.noWeekends});
+$('#noWeekends').attachDatepicker({beforeShowDay: $.datepicker.noWeekends});
 </script>
                     <p>Or you can provide your own function. The one below highlights and
@@ -285 +285 @@
                         <input type="text" size="10" id="nationalDays"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#nationalDays').datepicker({beforeShowDay: nationalDays});
+$('#nationalDays').attachDatepicker({beforeShowDay: nationalDays});
 
 // Highlight certain national days on the calendar
@@ -348 +348 @@
                     <p>And then configure the language per date picker instance.</p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#l10nDatepicker').datepicker($.extend({showStatus: true}, $.datepicker.regional['fr']));
-$('#rtlDatepicker').datepicker($.extend({showStatus: true}, $.datepicker.regional['he']));
+$('#l10nDatepicker').attachDatepicker($.extend({showStatus: true}, $.datepicker.regional['fr']));
+$('#rtlDatepicker').attachDatepicker($.extend({showStatus: true}, $.datepicker.regional['he']));
 </script>
                     <p><strong>Localisation packages:</strong></p>
@@ -363 +363 @@
                         <input type="text" size="10" class="dateRange" id="dTo"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('.dateRange').datepicker({beforeShow: customRange});
+$('.dateRange').attachDatepicker({beforeShow: customRange});
 
 // Customize two date pickers to work as a date range
@@ -378 +378 @@
 
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#rangeSelect').datepicker({rangeSelect: true});
+$('#rangeSelect').attachDatepicker({rangeSelect: true});
 </script>
                     <p><span class="demoLabel">Two months with range select:</span>
                         <input type="text" size="25" id="rangeSelect2Months"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#rangeSelect2Months').datepicker({rangeSelect: true, numberOfMonths: 2});
+$('#rangeSelect2Months').attachDatepicker({rangeSelect: true, numberOfMonths: 2});
 </script>
                     <p><span class="demoLabel">Six months with range select:</span>
                         <input type="text" size="25" id="rangeSelect6Months"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#rangeSelect6Months').datepicker({rangeSelect: true, numberOfMonths: [2, 3],
+$('#rangeSelect6Months').attachDatepicker({rangeSelect: true, numberOfMonths: [2, 3],
     stepMonths: 3, prevText: '&lt;&lt; Previous Months', nextText: 'Next Months &gt;&gt;'});
 </script>
@@ -398 +398 @@
                         <input type="text" size="10" id="openDateJan01"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#openDateJan01').datepicker({defaultDate: new Date(2007, 1 - 1, 1)});
+$('#openDateJan01').attachDatepicker({defaultDate: new Date(2007, 1 - 1, 1)});
 </script>
                     <p><span class="demoLabel">Open at 7 days from today:</span>
                         <input type="text" size="10" id="openDatePlus7"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#openDatePlus7').datepicker({defaultDate: +7});
+$('#openDatePlus7').attachDatepicker({defaultDate: +7});
 </script>
                     <p>Or specify a period from today - 'd' for days,
@@ -419 +419 @@
                         <input type="text" size="10" id="showWeeks"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#showWeeks').datepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true});
+$('#showWeeks').attachDatepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true});
 </script>
                     <p>Additional settings let you move the <em>Clear</em>/<em>Close</em> controls
@@ -431 +431 @@
                         <input type="text" size="10" id="addSettings"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#addSettings').datepicker({
+$('#addSettings').attachDatepicker({
     closeAtTop: false, 
     mandatory: true,
@@ -485 +485 @@
                         <input type="hidden" size="10" id="linkedDates" disabled="disabled"/></p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#linkedDates').datepicker({
+$('#linkedDates').attachDatepicker({
     minDate: new Date(2001, 1 - 1, 1), 
     maxDate: new Date(2010, 12 - 1, 31), 
@@ -523 +523 @@
 </script>
                 </div>
-                <div id="reconfig" class="tab_group1 container">
-                    <h3>Reconfiguration</h3>
-                    <p>If necessary, the date picker for an input (or set of inputs) can be reconfigured
-                        on the fly. As an example, here we change the speed at which the date picker appears.</p>
+                <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">
@@ -535 +535 @@
                         </select>
                     </p>
-                    <p><span class="demoLabel">Reconfigured date picker:</span>
-                        <input type="text" size="10" id="reconfigureCal"/></p>
+                    <p><span class="demoLabel">Change datepicker:</span>
+                        <input type="text" size="10" id="changeDP"/></p>
                     <p>When the option in the select changes, the following function is called:</p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#reconfigureCal').datepicker();
-// Reconfigure the calendar to selected speed.
+$('#changeDP').attachDatepicker();
+// Change the datepicker to selected speed.
 $("#speedSelectr").change(function() {
-    $.datepicker.reconfigureFor('#reconfigureCal', {speed: $(this).val()});
+    $('#changeDP').changeDatepicker({speed: $(this).val()});
 });
 </script>
@@ -569 +569 @@
 
 // Invoke inline configured datepickers
-$('.inlineConfig').datepicker();
+$('.inlineConfig').attachDatepicker();
 </script>
                 </div>
@@ -580 +580 @@
 <script type="text/jsdemo" charset="utf-8" class="demojs">
 // HTML &lt;span id="inlineDemo">&lt;/span>
-$('#inlineDemo').datepicker({
+$('#inlineDemo').attachDatepicker({
     onSelect: function(date) {
         alert(date);
@@ -596 +596 @@
                     </p>
 <script type="text/jsdemo" charset="utf-8" class="demojs">
-$('#rangeInline').datepicker({rangeSelect: true, rangeSeparator: ' to ',
+$('#rangeInline').attachDatepicker({rangeSelect: true, rangeSeparator: ' to ',
     numberOfMonths: 2, onSelect: updateInlineRange});
 $('#rangeInline').find('div:first').width(370); // Unfortunately not automatic
@@ -755 +755 @@
                             Customize each calendar with <a href="http://docs.jquery.com/UI/Datepicker/datepicker#options" target="_blank">additional settings</a>
                             as part of the initialization if necessary.
-<pre><code class="javascript">$('input selector').datepicker();
-$('input selector').datepicker({defaultDate: +7});</code></pre>
+<pre><code class="javascript">$('input selector').attachDatepicker();
+$('input selector').attachDatepicker({defaultDate: +7});</code></pre>
                         </li>
                     </ol>