Datepicker: Fixed #3891 Autosize input field

diff --git a/tests/unit/datepicker/datepicker_options.js b/tests/unit/datepicker/datepicker_options.js
index 768f43c2796363b1e2fb3655fdca5277961ebe13..c3ffb1d11d35f9469db36fc101367b6a67831c92 100644 (file)
--- a/tests/unit/datepicker/datepicker_options.js
+++ b/tests/unit/datepicker/datepicker_options.js
@@ -509,6 +509,44 @@ test('altField', function() {
        equals(alt.val(), '2008-06-04', 'Alt field - manual entry - not updated');
 });
 
+test('autoSize', function() {
+       var inp = init('#inp');
+       equals(inp.attr('size'), 0, 'Auto size - default');
+       inp.datepicker('option', 'autoSize', true);
+       equals(inp.attr('size'), 10, 'Auto size - mm/dd/yy');
+       inp.datepicker('option', 'dateFormat', 'm/d/yy');
+       equals(inp.attr('size'), 10, 'Auto size - m/d/yy');
+       inp.datepicker('option', 'dateFormat', 'D M d yy');
+       equals(inp.attr('size'), 15, 'Auto size - D M d yy');
+       inp.datepicker('option', 'dateFormat', 'DD, MM dd, yy');
+       equals(inp.attr('size'), 29, 'Auto size - DD, MM dd, yy');
+       inp.removeAttr('size');
+       // French
+       inp.datepicker('option', $.extend({autoSize: false}, $.datepicker.regional['fr']));
+       equals(inp.attr('size'), 0, 'Auto size - fr - default');
+       inp.datepicker('option', 'autoSize', true);
+       equals(inp.attr('size'), 10, 'Auto size - fr - dd/mm/yy');
+       inp.datepicker('option', 'dateFormat', 'm/d/yy');
+       equals(inp.attr('size'), 10, 'Auto size - fr - m/d/yy');
+       inp.datepicker('option', 'dateFormat', 'D M d yy');
+       equals(inp.attr('size'), 15, 'Auto size - fr - D M d yy');
+       inp.datepicker('option', 'dateFormat', 'DD, MM dd, yy');
+       equals(inp.attr('size'), 28, 'Auto size - fr - DD, MM dd, yy');
+       inp.removeAttr('size');
+       // Hebrew
+       inp.datepicker('option', $.extend({autoSize: false}, $.datepicker.regional['he']));
+       equals(inp.attr('size'), 0, 'Auto size - he - default');
+       inp.datepicker('option', 'autoSize', true);
+       equals(inp.attr('size'), 10, 'Auto size - he - dd/mm/yy');
+       inp.datepicker('option', 'dateFormat', 'm/d/yy');
+       equals(inp.attr('size'), 10, 'Auto size - he - m/d/yy');
+       inp.datepicker('option', 'dateFormat', 'D M d yy');
+       equals(inp.attr('size'), 14, 'Auto size - he - D M d yy');
+       inp.datepicker('option', 'dateFormat', 'DD, MM dd, yy');
+       equals(inp.attr('size'), 23, 'Auto size - he - DD, MM dd, yy');
+       inp.removeAttr('size');
+});
+
 test('daylightSaving', function() {
        var inp = init('#inp');
        var dp = $('#ui-datepicker-div');

diff --git a/ui/ui.datepicker.js b/ui/ui.datepicker.js
index b88460456eebda84822acb18e3a56ff591191452..5f1891fd8fb09ffdbba6ced5d0f37c3839a35c4d 100644 (file)
--- a/ui/ui.datepicker.js
+++ b/ui/ui.datepicker.js
@@ -100,7 +100,8 @@ function Datepicker() {
                altField: '', // Selector for an alternate field to store selected dates into
                altFormat: '', // The date format to use for the alternate field
                constrainInput: true, // The input is constrained by the current date format
-               showButtonPanel: false // True to show button panel, false to not show it
+               showButtonPanel: false, // True to show button panel, false to not show it
+               autoSize: false // True to size the input for the date format, false to leave as is
        };
        $.extend(this._defaults, this.regional['']);
        this.dpDiv = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"></div>');
@@ -206,9 +207,36 @@ $.extend(Datepicker.prototype, {
                        }).bind("getData.datepicker", function(event, key) {
                                return this._get(inst, key);
                        });
+               this._autoSize(inst);
                $.data(target, PROP_NAME, inst);
        },
 
+       /* Apply the maximum length for the date format. */
+       _autoSize: function(inst) {
+               if (this._get(inst, 'autoSize') && !inst.inline) {
+                       var date = new Date(2009, 12 - 1, 20); // Ensure double digits
+                       var dateFormat = this._get(inst, 'dateFormat');
+                       if (dateFormat.match(/[DM]/)) {
+                               var findMax = function(names) {
+                                       var max = 0;
+                                       var maxI = 0;
+                                       for (var i = 0; i < names.length; i++) {
+                                               if (names[i].length > max) {
+                                                       max = names[i].length;
+                                                       maxI = i;
+                                               }
+                                       }
+                                       return maxI;
+                               };
+                               date.setMonth(findMax(this._get(inst, (dateFormat.match(/MM/) ?
+                                       'monthNames' : 'monthNamesShort'))));
+                               date.setDate(findMax(this._get(inst, (dateFormat.match(/DD/) ?
+                                       'dayNames' : 'dayNamesShort'))) + 20 - date.getDay());
+                       }
+                       inst.input.attr('size', this._formatDate(inst, date).length);
+               }
+       },
+
        /* Attach an inline date picker to a div. */
        _inlineDatepicker: function(target, inst) {
                var divSpan = $(target);
@@ -395,6 +423,7 @@ $.extend(Datepicker.prototype, {
                        }
                        var date = this._getDateDatepicker(target);
                        extendRemove(inst.settings, settings);
+                       this._autoSize(inst);
                        this._setDateDatepicker(target, date);
                        this._updateDatepicker(inst);
                }