r2957 commited - Datepicker: Fixed #3891 Autosize input field
Revision: 2957
Author: kbwood.au
Date: Wed Jul 22 01:37:28 2009
Log: Datepicker: Fixed #3891 Autosize input field
http://code.google.com/p/jquery-ui/source/detail?r=2957
Modified:
/trunk/tests/unit/datepicker/datepicker_options.js
/trunk/ui/ui.datepicker.js
=======================================
--- /trunk/tests/unit/datepicker/datepicker_options.js Wed Jul 22 01:28:01
2009
+++ /trunk/tests/unit/datepicker/datepicker_options.js Wed Jul 22 01:37:28
2009
@@ -509,6 +509,44 @@
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');
=======================================
--- /trunk/ui/ui.datepicker.js Wed Jul 22 01:34:27 2009
+++ /trunk/ui/ui.datepicker.js Wed Jul 22 01:37:28 2009
@@ -100,7 +100,8 @@
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 @@
}).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 @@
}
var date = this._getDateDatepicker(target);
extendRemove(inst.settings, settings);
+ this._autoSize(inst);
this._setDateDatepicker(target, date);
this._updateDatepicker(inst);
}