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


301

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?

entrez la description de l'image ici

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

@dmaij: Si seulement un coup d'œil aux documents de l'API n'y aurait pas répondu ... Mais oui, l'image est belle ... :-)
TJ Crowder

@TJCrowder Il devrait y avoir une règle selon laquelle les questions ressemblent à ceci. Et en effet, regarder dans les documents de l'API aurait pu gagner du temps pour créer l'image ..
dmaij

11
@TJCrowder Heureusement qu'il existe une API. Mais je viens de googler "Jquery datepicker year range" et j'ai trouvé cela. Répondre à ma question en 10 secondes. Plus rapide, puis en utilisant une API.
Edwin Stoteler du

Réponses:


573

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.


5
J'avais des problèmes avant de réaliser que le +signe est requis.
th1rdey3

1
Merci, codage dur de cette façon annéeRange: '1950: 2013' a fonctionné
Ronald Nsabiyera

1
pour jQuey-Ui yearRange: "c-100: + c + 10" fonctionne bien où c représente l'année en cours
TechieBrij

2
@TechieBrij Ceci est utile mais il est censé l'êtrec-100:c+10
DreamTeK

3
@Obsidian csignifie en fait "l'année sélectionnée en cours" et non l'année en cours api.jqueryui.com/datepicker/#option-yearRange
ᾠῗᵲ ᄐ ᶌ

19

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


6

J'ai fait ça:

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

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


4

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

2
Merci pour les exemples
Jay

1

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.


1

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.