Problem with year dropdown scrollbar in jQuery datepicker

Question

I'm using a jQuery datepicker to select an applicant's date of birth, but the applicant's age must be restricted to values between 21 and 100 years.

In order to make the selection relatively easy I have turned on the month and year dropdown boxes, and being in the UK I have localised it.

<script type="text/javascript">
$(function () {
    $(".dp1").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'd MM yy', minDate: '-100y', maxDate: '-21y' });
});

The ASP.NET MVC2 VB.NET code for the text box is as follows:

<%: Html.TextBox("", If(DirectCast(Model, DateTime) = DateTime.MinValue, String.Empty, ViewData.TemplateInfo.FormattedModelValue), New With {.class = "dp1"})%>

That's al fine, but the year dropdown only shows a limited range of values and no scrollbar to indicate that the list of years is longer, but the size of the scroll bar slider is not giving any visual clues as to the whole range:

If you click on the top value and then let the dropdown close, the next time you open it, more values appear:

This is non-obvious behaviour and I only stumbled upon it by accident. Is there any way of making the scrollbar appear at all times and with a slider size inversely proportional to the range? And if not, what other methods of date selection going back a century (actually 99 years would be OK) are recommended?

For the record I'm using:

• jquery-ui-1.8.5
• jquery-1.4.1

Thanks

Crispin

Answer 1

Try setting the yearRange option as well (which will set the range of years in the year drop down box). You can set it as yearRange: "-100:-21". Note that setting yearRange alone doesn't affect the actual dates the user is allowed to pick (you still need to set minDate and maxDate).