Show months outside date range in selector? - jquery-ui

Question

I'm using jQuery UI's DatePicker to select a date of birth for consumers on my website. It is currently showing with the month and year via drop downs When, for example, I restrict the years to -18y, via maxDate, the month drop down does not show all of the months when the year 1993 is selected. It only shows the months up until the maximum months.
In usability testing, we've found that our demographic tends to click the month of their birth, then the year, then the day.
Is there a way to show all of the months, even if the dates within that month are not selectable?
Here is the code used to show the DatePicker:
$('.DobWidget').datepicker({
showOn: 'both',
buttonImage: '/media/img/admin/icon_calendar.gif',
buttonImageOnly: true,
dateFormat: js_date_format, // mm/dd/yyyy
constrainInput: false, // Handled server-side for type-in.
changeMonth: true,
changeYear: true,
maxDate: '-18y',
minDate: '-110y',
showButtonPanel: true,
onChangeMonthYear: function(year, month, inst) {
if (inst.currentDay != 0) {
$(this).datepicker("setDate", new Date(year, month - 1, inst.currentDay));
}
}
});
I am currently using jQueryUI v.1.8.16, and jQuery v.1.6.3, both provided by the Google AJAX API's.

Answer 1

Fix for jquery ui 1.8.17
I also had this problem I got in to work by changing some things in the jquery code. Now I see all months and I can select them but dates will still be unselectable as you want.
In _generateHTML function in the if statement you add maxDraw.setMonth('11'):
if (maxDate) {
maxDraw = (minDate && maxDraw < minDate ? minDate : maxDraw);
maxDraw.setMonth('11');
while (this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1)) > maxDraw) {
...
}
}
In _generateMonthYearHeader function in the for loop of the else statement you change:
for (var month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) &&
(!inMaxYear || month <= maxDate.getMonth()))
monthHtml += '<option value="' + month + '"' +
(month == drawMonth ? ' selected="selected"' : '') +
'>' + monthNamesShort[month] + '</option>';
}
becomes
for (var month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) &&
(!inMaxYear || month <= 11))
monthHtml += '<option value="' + month + '"' +
(month == drawMonth ? ' selected="selected"' : '') +
'>' + monthNamesShort[month] + '</option>';
}
In _restrictMinMax you add maxDate.setMonth('11'):
...
var maxDate = this._getMinMaxDate(inst, 'max');
maxDate.setMonth('11');
var newDate = (minDate && date < minDate ? minDate : date);
...
In _isInRange you add maxDate.setMonth('11'):
var minDate = this._getMinMaxDate(inst, 'min');
var maxDate = this._getMinMaxDate(inst, 'max');
maxDate.setMonth('11');
...