library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Datepicker: Fixed #3891 Autosize input field

Browse Source
This commit is contained in:
Keith Wood 2009-07-22 08:37:28 +00:00
parent d2bd01aecb
commit ef4000d9df
2 changed files with 68 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
tests/unit/datepicker/datepicker_options.js
View File

@ -509,6 +509,44 @@ test('altField', function() {
equals(alt.val(), '2008-06-04', 'Alt field - manual entry - not updated'); 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() { test('daylightSaving', function() {
var inp = init('#inp'); var inp = init('#inp');
var dp = $('#ui-datepicker-div'); var dp = $('#ui-datepicker-div');

31
ui/ui.datepicker.js
View File

@ -100,7 +100,8 @@ function Datepicker() {
altField: '', // Selector for an alternate field to store selected dates into altField: '', // Selector for an alternate field to store selected dates into
altFormat: '', // The date format to use for the alternate field altFormat: '', // The date format to use for the alternate field
constrainInput: true, // The input is constrained by the current date format 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['']); $.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>'); 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) { }).bind("getData.datepicker", function(event, key) {
return this._get(inst, key); return this._get(inst, key);
}); });
this._autoSize(inst);
$.data(target, PROP_NAME, 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. */ /* Attach an inline date picker to a div. */
_inlineDatepicker: function(target, inst) { _inlineDatepicker: function(target, inst) {
var divSpan = $(target); var divSpan = $(target);
@ -395,6 +423,7 @@ $.extend(Datepicker.prototype, {
} }
var date = this._getDateDatepicker(target); var date = this._getDateDatepicker(target);
extendRemove(inst.settings, settings); extendRemove(inst.settings, settings);
this._autoSize(inst);
this._setDateDatepicker(target, date); this._setDateDatepicker(target, date);
this._updateDatepicker(inst); this._updateDatepicker(inst);
} }