web-dev-qa-db-fra.com

jQuery UI: Datepicker a défini une liste déroulante de la plage d’années sur 100 ans

En utilisant 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 pour obtenir plus d'années.

Comment pouvons-nous définir la plage initiale sur 100 ans afin que l'utilisateur puisse voir une grande liste par défaut?

enter image description here

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }
jqueryjquery-uijquery-ui-datepicker
290
BahaiResearch.com

Vous pouvez définir la plage d’année à l’aide de cette option selon la documentation fournie 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

Des docs 

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

La plage des années affichées dans la liste déroulante des années: soit par rapport à l’année en cours ("-nn: + nn"), par rapport à l’année sélectionnée ("c-nn: c + nn"), en absolu ("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 limiter les dates pouvant être sélectionnées, utilisez les options minDate et/ou maxDate.

541
ᾠῗᵲᄐᶌ

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 sont indiquées dans le calendrier du mois en cours peut être sélectionné. Cette option est utilisée avec options.showOtherMonths set à vrai.

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"
    });
});

Reportez-vous à: - la plage d’années définie dans jquery datepicker

15
Ranju

J'ai fait ça:

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

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

4
learner88

Vous pouvez définir la plage d’année à l’aide de cette option dans datepicker de l’interface utilisateur jQuery:

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
0
Sanjib Debnath

C’est un peu tard dans la journée pour le dire, étant donné la question initiale posée il ya longtemps, mais c’est ce que j’ai fait.

J'avais besoin d'une autonomie de 70 ans, ce qui, bien que pas moins de 100 ans, reste encore trop d'années pour que le visiteur puisse le parcourir. (jQuery parcourt l'année en groupe, mais c'est un problème pour la plupart des gens.)

La première étape a été de modifier le code JavaScript du widget datepicker: Trouver ce code dans jquery-ui.js ou jquery-ui-min.js (où il sera réduit au minimum):

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 (à l'exception du courant) avec les 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 souris au cours de l'année de base. Votre visiteur peut faire défiler rapidement n'importe quel nombre d'années.

N'hésitez pas à utiliser ceci; donnez juste l'attribution appropriée dans votre code.

0
Garison Piatt

Je voulais implémenter le sélecteur de date pour sélectionner la date de naissance et j'ai eu du mal à changer la variable yearRange car elle ne semblait pas fonctionner avec ma version (1.5). J'ai mis à jour la dernière version de datequick jquery-ui ici: https://github.com/uxsolutions/bootstrap-datepicker .

Ensuite, j'ai découvert qu'ils fournissent cet outil très utile à la volée, ce qui vous permet de configurer votre datpicker dans son intégralité et de voir les paramètres à utiliser.

C'est comme ça que j'ai découvert que l'option 

defaultViewDate

est l’option que je cherchais et je n’ai trouvé aucun résultat à la recherche sur le web.

Donc, pour les autres utilisateurs: Si vous souhaitez également fournir le datepicker pour changer la date de naissance, je suggère d'utiliser ces options de code:

$('#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 commencez par afficher les années, il y a 20 ans, par rapport à l'année en cours.

0
AlexioVay