web-dev-qa-db-fra.com

jQuery datepicker années montrées

Avec le datepicker de jQuery, comment modifier la plage d’années affichée? Sur le site de l'interface utilisateur de jQuery, il est indiqué par défaut que "10 ans avant et après l'année en cours sont affichés". Je veux utiliser cela pour une sélection d'anniversaire et 10 ans avant aujourd'hui ne sert à rien. Cela peut-il être fait avec le datepicker jQuery ou devrai-je utiliser une solution différente?

lien vers la démo datepicker: http://jqueryui.com/demos/datepicker/#dropdown-month-year

jquerydatepicker
78
John Boker

Si vous regardez un peu la page de démonstration, vous verrez une section "Restricting Datepicker". Utilisez le menu déroulant pour spécifier la démo "Year dropdown shows last 20 years" Et appuyez sur Afficher la source:

$("#restricting").datepicker({ 
    yearRange: "-20:+0", // this is the option you're looking for
    showOn: "both", 
    buttonImage: "templates/images/calendar.gif", 
    buttonImageOnly: true 
});

Vous voudrez faire la même chose (changer évidemment -20 En -100 Ou quelque chose du genre).

165
Shog9

Pourquoi ne pas afficher les cases de sélection de l'année ou du mois?

$( ".datefield" ).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange:'-90:+0'
});
40
Plippie

ce que personne d'autre n'a dit, c'est que vous pouvez également définir des plages de dates codées en dur:

par exemple:

yearRange: "1901:2012"

bien qu'il soit conseillé de ne pas le faire, il s'agit toutefois d'une option parfaitement valable (et utile si vous recherchez légitimement une année spécifique dans un catalogue - telle que "1963: 1984").

10
Warren Sergent

Parfait pour les champs de date de naissance (et ce que j'utilise) est similaire à ce que Shog9 a dit, bien que je vais donner un exemple plus spécifique de la date de naissance:

$(".datePickerDOB").datepicker({ 
    yearRange: "-122:-18", //18 years or older up to 122yo (oldest person ever, can be sensibly set to something much smaller in most cases)
    maxDate: "-18Y", //Will only allow the selection of dates more than 18 years ago, useful if you need to restrict this
    minDate: "-122Y"
});

J'espère que les futurs googleurs trouveront cela utile :).

6
Maverick

En ajoutant à ce que @ Shog9 a publié, vous pouvez également limiter les dates individuellement dans la fonction beforeShowDay: callback.

Vous fournissez une fonction qui prend une date et retourne un tableau booléen:

"$(".selector").datepicker({ beforeShowDay: nationalDays}) 
natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], 
[5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], [9, 7, 
'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']]; 
function nationalDays(date) { 
    for (i = 0; i < natDays.length; i++) { 
      if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == 
natDays[i][1]) { 
        return [false, natDays[i][2] + '_day']; 
      } 
    } 
  return [true, '']; 
}
5
JamesSugrue
 $("#DateOfBirth").datepicker({
        yearRange: "-100:+0",
        changeMonth: true,
        changeYear: true,
    });

yearRange: '1950: 2013', // spécifiant une plage d'année codée en dur ou ainsi

yearRange: "-100: +0", // cent dernières années

Cela vous aidera à afficher un menu déroulant pour la sélection par année et par mois.

3
Manish

au, nz, c'est-à-dire, etc. sont les codes de pays des pays dont les journées nationales sont affichées (Australie, Nouvelle-Zélande, Irlande, ...). Comme indiqué dans le code, ces valeurs sont combinées avec '_day' et renvoyées pour être appliquées à ce jour en tant que style CSS. Les styles correspondants sont présentés dans le formulaire ci-dessous, qui déplace le texte de ce jour et le remplace par une image du drapeau du pays.

.au_day {
  text-indent: -9999px;
  background: #eee url(au.gif) no-repeat center;
}

La valeur 'false' renvoyée avec le nouveau style indique que ces jours ne peuvent pas être sélectionnés.

2
kbwood

je pense que cela peut fonctionner aussi bien

$(function () {
    $(".DatepickerInputdob").datepicker({
        dateFormat: "d M yy",
        changeMonth: true,
        changeYear: true,
        yearRange: '1900:+0',
        defaultDate: '01 JAN 1900'
    });
1
Himansz