jQuery UI: Datepicker définit la liste déroulante des années à 100 ans

En utilisant le Datepicker, la liste déroulante des années par défaut n'affiche que 10 ans. L'utilisateur doit cliquer sur la dernière année afin d'ajouter plus d'années.

Comment définir la plage initiale à 100 ans pour que l'utilisateur voit par défaut une grande liste?

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }

Vous pouvez définir la plage d'années en utilisant cette option par documentation ici http://api.jqueryui.com/datepicker/#option-yearRange

yearRange: '1950:2013', // specifying a hard coded year range

ou de cette façon

yearRange: "-100:+0", // last hundred years

Depuis les documents

Par défaut: "c-10: c + 10"

La plage d'années affichée dans la liste déroulante des années: soit relative à l'année du jour ("-nn: + nn"), relative à l'année actuellement sélectionnée ("c-nn: c + nn"), absolue ("nnnn: nnnn "), ou des combinaisons de ces formats (" nnnn: -nn "). Notez que cette option affecte uniquement ce qui apparaît dans la liste déroulante, pour restreindre les dates pouvant être sélectionnées, utilisez les options minDate et / ou maxDate.

Cela a parfaitement fonctionné pour moi.

ChangeYear: - Lorsqu'il est défini sur true, indique que les cellules du mois précédent ou suivant indiquées dans le calendrier du mois en cours peuvent être sélectionnées. Cette option est utilisée avec options.showOtherMonths défini sur true.

YearRange: - Spécifie la plage d'années dans la liste déroulante des années. (Valeur par défaut: «-10: +10 ″)

Exemple:-

$(document).ready(function() {
    $("#date").datepicker({
    changeYear:true,
    yearRange: "2005:2015"
    });
});

Référer: - définir la plage d'années dans jquery datepicker

J'ai fait ça:

var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange

où 50est la gamme de l'année en cours.

Vous pouvez définir la plage d'années en utilisant cette option dans le sélecteur de date jQuery UI:

yearRange: "c-100:c+0", // last hundred years and current years

yearRange: "c-100:c+100", // last hundred years and future hundred years

yearRange: "c-10:c+10", // last ten years and future ten years

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.

Je voulais implémenter le datepicker pour sélectionner la date de naissance et j'ai eu des problèmes pour changer le yearRangecar il ne semblait pas fonctionner avec ma version (1.5). J'ai mis à jour la dernière version de jquery-ui datepicker ici: https://github.com/uxsolutions/bootstrap-datepicker .

Ensuite, j'ai découvert qu'ils fournissaient cet outil très utile à la volée, afin que vous puissiez configurer l'ensemble de votre sélecteur de date et voir quels paramètres vous devez utiliser.

Voilà comment j'ai découvert que l'option

defaultViewDate

est l'option que je cherchais et je n'ai trouvé aucun résultat en recherchant sur le web.

Donc, pour les autres utilisateurs: si vous souhaitez également fournir le sélecteur de date pour modifier la date de naissance, je suggère d'utiliser les options de code suivantes:

$('#birthdate').datepicker({
    startView: 2,
    maxViewMode: 2,
    daysOfWeekHighlighted: "1,2",
    defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});

Lorsque vous ouvrez le sélecteur de date, vous commencerez par la vue pour sélectionner les années, il y a 20 ans par rapport à l'année en cours.