JQuery UI Datepicker, d'inverser l'ordre de l'année dans les listes déroulantes

J'ai un datepicker avec changeyear: vrai. "L'année" du menu déroulant affiche le titre de 2009, alors au lieu de la prochaine année, en dessous du titre de 2008, 2007, 2006 et ainsi de suite, il commence à 1999 et compte vers le haut. Je n'arrive pas à trouver une solution facile à inverser cet ordre?

  • Je déteste vraiment la facilité d'utilisation pauvres sur les listes déroulantes pour sélectionner des années et généralement vous recommandons de les éviter. Voici pourquoi: useit.com/alertbox/20001112.html.
  • C'est à l'intérieur d'un calendrier pop-up, il donne en fait à l'utilisateur trois options, tapez eux-mêmes (ce qui est recommandé dans cet article), sélectionnez-le à partir d'un calendrier contextuel ou utilisez la liste déroulante pour sélectionner l'année. Im assez sûr que c'est une solution viable!
InformationsquelleAutor Lance | 2009-10-20
  1. 29

    Je ne recommanderais pas l'édition de l'original ui.datepicker.js comme Cuong suggéré parce que vos modifications seront perdues dès que vous ou un autre développeur remplace le fichier lorsqu'une nouvelle version est disponible. Se souvenant de ce personnalisations ont été faites dans le but de les ré-appliquer n'est pas pratique. Au lieu de cela, vous pouvez remplacer le _generateMonthYearHeader méthode dans votre propre JS comme suit:

    //store original so we can call it inside our overriding method
$.datepicker._generateMonthYearHeader_original = $.datepicker._generateMonthYearHeader;

$.datepicker._generateMonthYearHeader = function(inst, dm, dy, mnd, mxd, s, mn, mns) {
  var header = $($.datepicker._generateMonthYearHeader_original(inst, dm, dy, mnd, mxd, s, mn, mns)),
      years = header.find('.ui-datepicker-year');

  //reverse the years
  years.html(Array.prototype.reverse.apply(years.children()));

  //return our new html
  return $('<div />').append(header).html();
}

    J'ai juste écrit ce quelque chose que je suis de travailler, et il fait le tour bien 🙂

    • // Ajouter le ci-dessous si la condition. D'autres sages de l'année n'est pas affiché lorsqu'il n'est pas d'une liste déroulante. si(en années.est('select')) years.html(Tableau.le prototype.inverse.appliquer(en années.les enfants()));
    InformationsquelleAutor jjenzz
  2. 6

    Je pense que le meilleur moyen de pirater le plugin sans déchirer c'est l'affectation d'un gestionnaire d'événements pour l'année sélectionner un élément.

    //Hack for reverting year order
$(document.body).delegate('select.ui-datepicker-year', 'mousedown', function() {
  (function(sel) {
    var el = $(sel);
    var ops = $(el).children().get();
    if ( ops.length > 0 && $(ops).first().val() < $(ops).last().val() ) {
      $(el).empty();
      $(el).html(ops.reverse());
    }
  })(this);
});

    Ce code doit fonctionner correctement! 😛

    InformationsquelleAutor Carlos Yslas
  3. 4
    • Ouvrir le fichier ui.datepicker.js
    • Trouver la méthode la _generateMonthYearHeader: function(inst, drawMonth, drawYear, minDate, maxDate, selectedDate, secondary, monthNames, monthNamesShort)

    • Trouver la boucle suivante dans la méthode

      for (; year <= endYear; year++) {
    html += '<option value="' + year + '"' +
        (year == drawYear ? ' selected="selected"' : '') +
        '>' + year + '</option>';
}

html += '</select>';

    • Insérez le code suivant avant que la boucle:

      if (year-100 < 1900) //Check year is lower then 1900
    year = 1950;     //change start point of above loop, it helps you having the 
                     //year's dropdownlist starting at 1950, and ending of current year plus 10.
    InformationsquelleAutor Cuong Quach
  4. 3

    J'ai une réponse pour vous, mais ce n'est pas exactement ce que vous voulez entendre.

    Après des recherches sur internet pour trouver une solution qui permettrait d'inverser l'ordre des années, dans la liste déroulante, j'en viens à ceci:

    {
    changeMonth: true
    , changeYear: true
    , yearRange: '-65:'
    , maxDate: '1999/12/31'
}

    Ce sera le maxdate de présélection, et par conséquent, le choix d'un an vous verrez automatiquement la dernière entrée, étant ainsi en mesure de faire défiler jusqu' de choisir une date antérieure.

    Edit: yearRange est ajouté de manière arbitraire, pour créer un point de départ à 65 ans. maxDate est également choisie arbitrairement, comme une date de 12 ans avant d'écrire ce commentaire. Fondamentalement, ce menu permettra à quelqu'un de choisir un âge compris entre 12 et 65 ans.

    Ce n'est pas idéal, mais ça fonctionne assez bien.

    InformationsquelleAutor Alex
  5. 3

    Il est un "chemin" pour obtenir le début de l'année à partir de la dernière date:

    dateFormat: 'mm/dd/yy',
changeMonth: true, 
changeYear: true,  
yearRange: "-70:", 
maxDate: "-13Y"

    Au lieu si vous utilisez yearRange comme un nombre fixe d'années yearRange: "1900:-13" il est préférable d'utiliser cette de bas en haut: "-70:", et de définir la maxDate. Maintenant, je reçois mon année de sélectionner la zone à partir de 2004 et non de 1900.

    P. S: Toutes les autres solutions ont été testées. Ils sont très lents, et certains ne fonctionnent pas si bien (en particulier les anciens - ensembles année en cours au lieu de 2004 par exemple).

    • Ce doit être la accepté de répondre.
    InformationsquelleAutor Rick Sanchez
  6. 1

    Remplacer la première ligne de la for boucle avec:

    var minYear = year;
year = endYear;
for (; year >= minYear; year--) {
    InformationsquelleAutor James