Datepicker: Fixed #3891 Autosize input field

Author: kbwood

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');

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);
 		}