Bug Tracker

Show
Ignore:
Timestamp:
01/20/08 22:20:24 (11 months 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.

Files:
1 modified

Legend:

Unmodified
Added
Removed

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

    r4411 r4490  
    3030            <div id="header"> 
    3131                <div> 
    32                     <h1>jQuery UI Datepicker v3.2</h1> 
     32                    <h1>jQuery UI Datepicker v3.3</h1> 
    3333                    <p class="caption">Written by <a href="/">Marc Grabanski</a> and <a href="http://keith-wood.name">Keith Wood</a>.</p> 
    3434                </div> 
    … …  
    3636            <?php $code_nav='ui-datepicker'; include '../code_nav.php' ?> 
    3737            <div id="content"> 
    38                 <h2>jQuery UI Datepicker v3.2 Examples</h2> 
     38                <h2>jQuery UI Datepicker v3.3 Examples</h2> 
    3939                <ul id="tab_menu1" class="tabs"> 
    4040                    <li><a href="#default">Defaults</a></li> 
    … …  
    4747                    <li style="clear: left;"><a href="#range">Date range</a></li> 
    4848                    <li><a href="#misc">Miscellaneous</a></li> 
    49                     <li><a href="#reconfig">Reconfigure</a></li> 
     49                    <li><a href="#change">Change Settings</a></li> 
    5050                    <li><a href="#inline">Inline</a></li> 
    5151                    <li><a href="#styles">Stylesheets</a></li> 
    … …  
    5959                        <input type="text" size="30" value="click to show datepicker" id="defaultFocus"/></p> 
    6060<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    61 $('#defaultFocus').datepicker();     
     61$('#defaultFocus').attachDatepicker();   
    6262</script> 
    6363                    <p><span class="demoLabel">IE select issue:</span> 
    … …  
    9696                        <input type="button" id="enableFocus" value="Disable"/></p> 
    9797<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    98 $('#invokeFocus').datepicker({showOn: 'focus'});     
     98$('#invokeFocus').attachDatepicker({showOn: 'focus'});   
    9999</script> 
    100100                    <p><span class="demoLabel">Appears via text button:</span> 
    … …  
    102102                        <input type="button" id="enableButton" value="Disable"/></p> 
    103103<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    104 $('#invokeButton').datepicker({showOn: 'button', buttonText: '...', 
     104$('#invokeButton').attachDatepicker({showOn: 'button', buttonText: '...', 
    105105    buttonImage: '', buttonImageOnly: false}); 
    106106</script> 
    … …  
    109109                        <input type="button" id="enableBoth" value="Disable"/></p> 
    110110<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    111 $('.invokeBoth').datepicker({showOn: 'both', buttonImage: 'img/calendar.gif', buttonImageOnly: true}); 
     111$('.invokeBoth').attachDatepicker({showOn: 'both', buttonImage: 'img/calendar.gif', buttonImageOnly: true}); 
    112112</script> 
    113113                    <p>You can embed the trigger image within the input area via CSS.</p> 
    … …  
    115115                        <input type="text" size="10" id="embedButton"/></p> 
    116116<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    117 $('#embedButton').datepicker({showOn: 'button', buttonImage: 'img/calendar.gif', buttonImageOnly: true}); 
     117$('#embedButton').attachDatepicker({showOn: 'button', buttonImage: 'img/calendar.gif', buttonImageOnly: true}); 
    118118 
    119119// CSS 
    … …  
    123123<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    124124$('#enableFocus').toggle( 
    125     function () { this.value = 'Enable'; $.datepicker.disableFor('#invokeFocus'); }, 
    126     function () { this.value = 'Disable'; $.datepicker.enableFor('#invokeFocus'); }); 
     125    function () { this.value = 'Enable'; $('#invokeFocus').disableDatepicker(); }, 
     126    function () { this.value = 'Disable'; $('#invokeFocus').enableDatepicker(); }); 
    127127$('#enableButton').toggle( 
    128     function () { this.value = 'Enable'; $.datepicker.disableFor($('#invokeButton')); }, 
    129     function () { this.value = 'Disable'; $.datepicker.enableFor($('#invokeButton')); }); 
     128    function () { this.value = 'Enable'; $('#invokeButton').disableDatepicker(); }, 
     129    function () { this.value = 'Disable'; $('#invokeButton').enableDatepicker(); }); 
    130130$('#enableBoth').toggle( 
    131     function () { this.value = 'Enable'; $.datepicker.disableFor($('.invokeBoth')[0]); }, 
    132     function () { this.value = 'Disable'; $.datepicker.enableFor($('.invokeBoth')[0]); }); 
     131    function () { this.value = 'Enable'; $('.invokeBoth:first').disableDatepicker(); }, 
     132    function () { this.value = 'Disable'; $('.invokeBoth:first').enableDatepicker(); }); 
    133133</script> 
    134134                    <p>The date picker can also be triggered externally for a particular input.</p> 
    … …  
    182182                        <input type="text" size="10" id="restrictControls"/></p> 
    183183<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    184 $('#restrictControls').datepicker({firstDay: 1, changeFirstDay: false, 
     184$('#restrictControls').attachDatepicker({firstDay: 1, changeFirstDay: false, 
    185185    changeMonth: false, changeYear: false}); 
    186186</script> 
    … …  
    190190                        <input type="text" size="10" id="restrictDates"/></p> 
    191191<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    192 $('#restrictDates').datepicker({minDate: new Date(2005, 1 - 1, 26), 
     192$('#restrictDates').attachDatepicker({minDate: new Date(2005, 1 - 1, 26), 
    193193    maxDate: new Date(2007, 1 - 1, 26)}); 
    194194</script> 
    … …  
    220220                        <input type="text" size="10" id="mediumFormat"/></p> 
    221221<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    222 $('#mediumFormat').datepicker({dateFormat: 'M d, yy'}); 
     222$('#mediumFormat').attachDatepicker({dateFormat: 'M d, yy'}); 
    223223</script> 
    224224                    <p><span class="demoLabel">Long format:</span> 
    225225                        <input type="text" size="20" id="longFormat"/></p> 
    226226<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    227 $('#longFormat').datepicker({dateFormat: 'MM d, yy'}); 
     227$('#longFormat').attachDatepicker({dateFormat: 'MM d, yy'}); 
    228228</script> 
    229229                    <p><span class="demoLabel">Full format:</span> 
    230230                        <input type="text" size="30" id="fullFormat"/></p> 
    231231<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    232 $('#fullFormat').datepicker({dateFormat: 'DD, MM d, yy'}); 
     232$('#fullFormat').attachDatepicker({dateFormat: 'DD, MM d, yy'}); 
    233233</script> 
    234234                    <p>Display dates without the century. The century is then determined based on the 
    … …  
    239239                        <input type="text" size="10" id="noCentury"/></p> 
    240240<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    241 $('#noCentury').datepicker({dateFormat: 'dd/mm/y'}); 
     241$('#noCentury').attachDatepicker({dateFormat: 'dd/mm/y'}); 
    242242</script> 
    243243                    <p><span class="demoLabel">ISO date format:</span> 
    244244                        <input type="text" size="10" id="isoFormat"/></p> 
    245245<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    246 $('#isoFormat').datepicker({dateFormat: 'yy-mm-dd'}); 
     246$('#isoFormat').attachDatepicker({dateFormat: 'yy-mm-dd'}); 
    247247</script> 
    248248                    <p><span class="demoLabel">French full format:</span> 
    249249                        <input type="text" size="30" id="frFullFormat"/></p> 
    250250<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    251 $('#frFullFormat').datepicker($.datepicker.regional['fr']); 
    252 $.datepicker.reconfigureFor('#frFullFormat', {dateFormat: 'DD, MM d, yy'}); 
     251$('#frFullFormat').attachDatepicker($.datepicker.regional['fr']); 
     252$('#frFullFormat').changeDatepicker({dateFormat: 'DD, MM d, yy'}); 
    253253</script> 
    254254                    <p>The formatting codes are:</p> 
    … …  
    278278                        <input type="text" size="10" id="noWeekends"/></p> 
    279279<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    280 $('#noWeekends').datepicker({beforeShowDay: $.datepicker.noWeekends}); 
     280$('#noWeekends').attachDatepicker({beforeShowDay: $.datepicker.noWeekends}); 
    281281</script> 
    282282                    <p>Or you can provide your own function. The one below highlights and 
    … …  
    285285                        <input type="text" size="10" id="nationalDays"/></p> 
    286286<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    287 $('#nationalDays').datepicker({beforeShowDay: nationalDays}); 
     287$('#nationalDays').attachDatepicker({beforeShowDay: nationalDays}); 
    288288 
    289289// Highlight certain national days on the calendar 
    … …  
    348348                    <p>And then configure the language per date picker instance.</p> 
    349349<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    350 $('#l10nDatepicker').datepicker($.extend({showStatus: true}, $.datepicker.regional['fr'])); 
    351 $('#rtlDatepicker').datepicker($.extend({showStatus: true}, $.datepicker.regional['he'])); 
     350$('#l10nDatepicker').attachDatepicker($.extend({showStatus: true}, $.datepicker.regional['fr'])); 
     351$('#rtlDatepicker').attachDatepicker($.extend({showStatus: true}, $.datepicker.regional['he'])); 
    352352</script> 
    353353                    <p><strong>Localisation packages:</strong></p> 
    … …  
    363363                        <input type="text" size="10" class="dateRange" id="dTo"/></p> 
    364364<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    365 $('.dateRange').datepicker({beforeShow: customRange}); 
     365$('.dateRange').attachDatepicker({beforeShow: customRange}); 
    366366 
    367367// Customize two date pickers to work as a date range 
    … …  
    378378 
    379379<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    380 $('#rangeSelect').datepicker({rangeSelect: true}); 
     380$('#rangeSelect').attachDatepicker({rangeSelect: true}); 
    381381</script> 
    382382                    <p><span class="demoLabel">Two months with range select:</span> 
    383383                        <input type="text" size="25" id="rangeSelect2Months"/></p> 
    384384<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    385 $('#rangeSelect2Months').datepicker({rangeSelect: true, numberOfMonths: 2}); 
     385$('#rangeSelect2Months').attachDatepicker({rangeSelect: true, numberOfMonths: 2}); 
    386386</script> 
    387387                    <p><span class="demoLabel">Six months with range select:</span> 
    388388                        <input type="text" size="25" id="rangeSelect6Months"/></p> 
    389389<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    390 $('#rangeSelect6Months').datepicker({rangeSelect: true, numberOfMonths: [2, 3], 
     390$('#rangeSelect6Months').attachDatepicker({rangeSelect: true, numberOfMonths: [2, 3], 
    391391    stepMonths: 3, prevText: '&lt;&lt; Previous Months', nextText: 'Next Months &gt;&gt;'}); 
    392392</script> 
    … …  
    398398                        <input type="text" size="10" id="openDateJan01"/></p> 
    399399<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    400 $('#openDateJan01').datepicker({defaultDate: new Date(2007, 1 - 1, 1)}); 
     400$('#openDateJan01').attachDatepicker({defaultDate: new Date(2007, 1 - 1, 1)}); 
    401401</script> 
    402402                    <p><span class="demoLabel">Open at 7 days from today:</span> 
    403403                        <input type="text" size="10" id="openDatePlus7"/></p> 
    404404<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    405 $('#openDatePlus7').datepicker({defaultDate: +7}); 
     405$('#openDatePlus7').attachDatepicker({defaultDate: +7}); 
    406406</script> 
    407407                    <p>Or specify a period from today - 'd' for days, 
    … …  
    419419                        <input type="text" size="10" id="showWeeks"/></p> 
    420420<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    421 $('#showWeeks').datepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true}); 
     421$('#showWeeks').attachDatepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true}); 
    422422</script> 
    423423                    <p>Additional settings let you move the <em>Clear</em>/<em>Close</em> controls 
    … …  
    431431                        <input type="text" size="10" id="addSettings"/></p> 
    432432<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    433 $('#addSettings').datepicker({ 
     433$('#addSettings').attachDatepicker({ 
    434434    closeAtTop: false,  
    435435    mandatory: true, 
    … …  
    485485                        <input type="hidden" size="10" id="linkedDates" disabled="disabled"/></p> 
    486486<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    487 $('#linkedDates').datepicker({ 
     487$('#linkedDates').attachDatepicker({ 
    488488    minDate: new Date(2001, 1 - 1, 1),  
    489489    maxDate: new Date(2010, 12 - 1, 31),  
    … …  
    523523</script> 
    524524                </div> 
    525                 <div id="reconfig" class="tab_group1 container"> 
    526                     <h3>Reconfiguration</h3> 
    527                     <p>If necessary, the date picker for an input (or set of inputs) can be reconfigured 
    528                         on the fly. As an example, here we change the speed at which the date picker appears.</p> 
     525                <div id="change" class="tab_group1 container"> 
     526                    <h3>Changing Settings</h3> 
     527                    <p>If necessary, the datepicker settings for an input (or set of inputs) can be changed 
     528                        on the fly. As an example, here we change the speed at which the datepicker appears.</p> 
    529529                    <p><span class="demoLabel">Display speed:</span> 
    530530                        <select id="speedSelectr"> 
    … …  
    535535                        </select> 
    536536                    </p> 
    537                     <p><span class="demoLabel">Reconfigured date picker:</span> 
    538                         <input type="text" size="10" id="reconfigureCal"/></p> 
     537                    <p><span class="demoLabel">Change datepicker:</span> 
     538                        <input type="text" size="10" id="changeDP"/></p> 
    539539                    <p>When the option in the select changes, the following function is called:</p> 
    540540<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    541 $('#reconfigureCal').datepicker(); 
    542 // Reconfigure the calendar to selected speed. 
     541$('#changeDP').attachDatepicker(); 
     542// Change the datepicker to selected speed. 
    543543$("#speedSelectr").change(function() { 
    544     $.datepicker.reconfigureFor('#reconfigureCal', {speed: $(this).val()}); 
     544    $('#changeDP').changeDatepicker({speed: $(this).val()}); 
    545545}); 
    546546</script> 
    … …  
    569569 
    570570// Invoke inline configured datepickers 
    571 $('.inlineConfig').datepicker(); 
     571$('.inlineConfig').attachDatepicker(); 
    572572</script> 
    573573                </div> 
    … …  
    580580<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    581581// HTML &lt;span id="inlineDemo">&lt;/span> 
    582 $('#inlineDemo').datepicker({ 
     582$('#inlineDemo').attachDatepicker({ 
    583583    onSelect: function(date) { 
    584584        alert(date); 
    … …  
    596596                    </p> 
    597597<script type="text/jsdemo" charset="utf-8" class="demojs"> 
    598 $('#rangeInline').datepicker({rangeSelect: true, rangeSeparator: ' to ', 
     598$('#rangeInline').attachDatepicker({rangeSelect: true, rangeSeparator: ' to ', 
    599599    numberOfMonths: 2, onSelect: updateInlineRange}); 
    600600$('#rangeInline').find('div:first').width(370); // Unfortunately not automatic 
    … …  
    755755                            Customize each calendar with <a href="http://docs.jquery.com/UI/Datepicker/datepicker#options" target="_blank">additional settings</a> 
    756756                            as part of the initialization if necessary. 
    757 <pre><code class="javascript">$('input selector').datepicker(); 
    758 $('input selector').datepicker({defaultDate: +7});</code></pre> 
     757<pre><code class="javascript">$('input selector').attachDatepicker(); 
     758$('input selector').attachDatepicker({defaultDate: +7});</code></pre> 
    759759                        </li> 
    760760                    </ol>