Interface utilisateur jQuery: Datepicker a défini la plage de dissortingbution sur 100 ans

En utilisant le Datepicker, la liste déroulante des années ne montre que 10 ans. L’utilisateur doit cliquer sur l’année précédente pour append plus d’années.

Comment pouvons-nous définir la plage initiale à 100 ans pour que l’utilisateur puisse voir une grande liste par défaut?

entrer la description de l'image ici

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

Vous pouvez définir l’année à l’aide de 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

De la documentation

Par défaut: “c-10: c + 10”

La plage des années affichées dans la liste déroulante de l’année: soit par rapport à l’année d’aujourd’hui (“-nn: + nn”), par rapport à l’année sélectionnée (“c-nn: c + nn”), absolu (“nnnn: nnnn “), ou des combinaisons de ces formats (” nnnn: -nn “). Notez que cette option n’affecte que ce qui apparaît dans la liste déroulante, pour limiter les dates pouvant être sélectionnées à l’aide des options minDate et / ou maxDate.

Cela a parfaitement fonctionné pour moi.

ChangeYear: – Si défini sur true, indique que les cellules du mois précédent ou du mois suivant indiqué 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 de l’année. (Valeur par défaut: «-10: +10 ″)

Exemple:-

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

Refer: – régler la plage de l’année en jquery datepicker

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.

C’est un peu tard dans la journée pour suggérer cela, compte tenu de la date à laquelle la question originale a été publiée, mais c’est ce que j’ai fait.

J’ai eu besoin d’une autonomie de 70 ans, qui, même si elle ne dépasse pas 100, est encore trop longue pour que le visiteur puisse la parcourir. (jQuery fait des progrès par année dans les groupes, mais cela pose un problème à la plupart des gens.)

La première étape a consisté à modifier le code JavaScript du widget Datepicker: Recherchez ce code dans jquery-ui.js ou jquery-ui-min.js (où il sera réduit):

 for (a.yearshtml+='";

Et remplacez-le par ceci:

 a.yearshtml+='";

Cela entoure les décennies (sauf pour le courant) avec les tags 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 les visiteurs visitent l’année de base. Votre visiteur peut parcourir n’importe quel nombre d’années rapidement.

N’hésitez pas à utiliser ceci; il suffit de donner l’atsortingbution appropriée dans votre code.

Je voulais mettre en place le datpicker pour sélectionner la date de naissance et j’ai eu des problèmes pour changer le yearRange car il ne semblait pas fonctionner avec ma version (1.5). J’ai mis à jour la version la plus récente 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, de sorte que vous pouvez configurer l’intégralité de votre datepicker et voir quels parameters 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 cherchant sur le web.

Donc, pour les autres utilisateurs: Si vous souhaitez également fournir le datepicker pour modifier 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 } });

Lors de l’ouverture du datepicker, vous commencerez par sélectionner les années, il y a 20 ans, par rapport à l’année en cours.