Problema con la barra di scorrimento a discesa anno in jQuery datepicker

Question

Uso un jQuery datepicker per selezionare la data di nascita di un richiedente, ma l'età del richiedente deve essere limitata a valori compresi tra 21 e 100 anni.

Per rendere la selezione relativamente semplice, ho attivato le caselle a discesa del mese e dell'anno, e trovandomi nel Regno Unito l'ho localizzato.

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

Il codice ASP.NET MVC2 VB.NET per la casella di testo è il seguente:

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

Ecco al bene, ma la discesa dell'anno mostra solo un numero limitato di valori e nessuna barra di scorrimento per indicare che l'elenco degli anni è più lungo, ma la dimensione del cursore della barra di scorrimento non fornisce alcun indizio visivo dell'intero intervallo:

Se si fa clic sul valore superiore e poi lasciare che il menu a discesa stretta, la prossima volta che lo si apre, più valori appaiono:

Questo è un comportamento non-ovvio e ci siamo imbattuti solo su di essa per errore. C'è un modo per far apparire la barra di scorrimento in ogni momento e con una dimensione del cursore inversamente proporzionale alla gamma? E se no, quali altri metodi di selezione della data risalenti a un secolo (in realtà 99 anni sarebbe OK) sono raccomandati?

Per la cronaca che sto utilizzando:

• jquery-ui-1.8.5
• jquery-1.4.1

Grazie

Crispin

Answer 1

Try impostando anche l'opzione yearRange (che imposterà l'intervallo di anni nella casella a discesa dell'anno). È possibile impostarlo come yearRange: "-100: -21". Si noti che l'impostazione yearRange da sola non influisce sulle date effettive che l'utente può scegliere (è comunque necessario impostare minDate e maxDate).

Answer 2

Quanto segue imposta l'intervallo di anni dal 1970 all'anno in corso e si occupa anche del problema di scorrimento.

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