diff --git a/tests/unit/datepicker/datepicker_options.js b/tests/unit/datepicker/datepicker_options.js index 768f43c27..c3ffb1d11 100644 --- 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 b88460456..5f1891fd8 100644 --- 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 = $('
'); @@ -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); }