Problem with year dropdown scrollbar in jQuery datepicker

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 i开发者_如何学Pythont, 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

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).

The following will set year range from 1970 to current year and also take care of the scrolling problem.

.datepicker({yearRange: "1970:+nn"});

Scrolling up when select year in BDP: BasicDatePicker and using this code because set same position again

<script>
  function SetScrollPostion() {
      var scrollPos = $(window).scrollTop();
      setTimeout(function () {
          window.scrollTo(0, scrollPos);
          $(".bdpYearSelectorImg").click(function () {
              SetScrollPostion();
          });
      }, 1)
  }

  $(".bdpButton").click(function () {
      $("#yearSelector").click(function () {
          $(".bdpYearSelectorImg").click(function () {
              SetScrollPostion();
          });
      });
  });
</script>