C'est un peu tard dans la journée pour suggérer cela, étant donné depuis combien de temps la question d'origine a été publiée, mais c'est ce que j'ai fait.
J'avais besoin d'une plage de 70 ans, ce qui, bien que pas autant que 100, est encore trop d'années pour que le visiteur puisse le parcourir. (jQuery traverse l'année en groupe, mais c'est une douleur dans la patootie pour la plupart des gens.)
La première étape a été de modifier le JavaScript du widget datepicker: Trouvez ce code dans jquery-ui.js ou jquery-ui-min.js (où il sera minimisé):
for (a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+
a.id+"', this, 'Y');\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');\">";b<=g;b++)
a.yearshtml+='<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
a.yearshtml+="</select>";
Et remplacez-le par ceci:
a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+
".datepicker._selectMonthYear('#"+a.id+"', this, 'Y');
\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');
\">";
for(opg=-1;b<=g;b++) {
a.yearshtml+=((b%10)==0 || opg==-1 ?
(opg==1 ? (opg=0, '</optgroup>') : '')+
(b<(g-10) ? (opg=1, '<optgroup label="'+b+' >">') : '') : '')+
'<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
}
a.yearshtml+="</select>";
Cela entoure les décennies (sauf pour le courant) avec des balises OPTGROUP.
Ensuite, ajoutez ceci à votre fichier CSS:
.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }
Cela cache les décennies jusqu'à ce que le visiteur se souris pendant l'année de base. Votre visiteur peut faire défiler rapidement n'importe quel nombre d'années.
N'hésitez pas à l'utiliser; veuillez simplement attribuer correctement votre code.