JQuery UI Datepicker, odwróć kolejność roku w rozwijanym menu

Question

Mam datepicker z changeyear: true. Lista rozwijana "rok" wyświetla tytuł jako 2009, a następnie zamiast następnego roku pod tytułem 2008, 2007, 2006 itd. Zaczyna się od 1999 roku i liczy się w górę. Nie mogę znaleźć łatwego rozwiązania, aby odwrócić tę kolejność?

Answer 1

Nie polecam edycji oryginalnego pliku ui.datepicker.js jako Cuong zasugerowanego, ponieważ Twoje zmiany zostaną utracone, gdy ty lub inny programista zastąpi plik po wydaniu nowej wersji. Pamiętanie, jakie dostosowania zostały dokonane w celu ponownego zastosowania, nie jest praktyczne. Zamiast tego, można zastąpić istniejący _generateMonthYearHeader metodę własnymi odrębnymi JS tak:

// 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(); 
} 

Właśnie napisałem to na coś pracuję nad i to załatwia sprawę ładnie :)

Answer 2

• Otwórz plik ui.datepicker.js
• znaleźć metody _generateMonthYearHeader: function(inst, drawMonth, drawYear, minDate, maxDate, selectedDate, secondary, monthNames, monthNamesShort)

• znaleźć następujące pętli w metodzie

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

• wstawić następujący kod przed pętli:

  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. 
  

Answer 3

Wymień pierwszą linię pętli for z:

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

Answer 4

mam odpowiedź dla ciebie, ale to nie jest dokładnie to, co możesz usłyszeć.

Po przeszukaniu internetu do rozwiązania, które byłoby w odwrotnej kolejności latach w rozwijanym, doszedłem do tego:

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

ten będzie miał MaxDate wstępnie, a zatem wybierając roku pan będzie automatycznie wyświetla ostatni wpis, dzięki czemu można przewinąć do, aby wybrać wcześniejszą datę.

Edytuj: YearRange jest dodawany dowolnie, aby utworzyć punkt początkowy 65 lat temu. maxDate jest również wybierany arbitralnie, jako data 12 lat przed napisaniem tego komentarza. Zasadniczo to menu pozwoli komuś wybrać wiek pomiędzy 12 a 65 lat.

Nie jest idealny, ale działa wystarczająco dobrze.

Answer 5

Myślę, że najlepszym sposobem na zhackowanie wtyczki bez zgrywania jest przypisanie programu obsługi zdarzeń do wybranego elementu roku.

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

Ten kod musi działać poprawnie! : P

Answer 6

Przegląd własną rękę odpowiedź. Mam nadzieję że to pomoże :) !

jQuery datepicker year dropdown starts from 1900 and I want it to start from the bottom

To jest jak I rozwiązać mój problem.i myślę, że to dlatego jQuery nie są ustalające ten „błąd”, ponieważ jest to „droga”, aby uzyskać lat zaczęło się od ostatniego dnia:

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

W porównaniu do mojego oryginalnego kodu zamieszczonych tutaj, Zamiast tego, jeśli używasz yearRange jako stałych lat yearRange: "1900:-13", lepiej jest użyć od dołu w górę: "-70:". i ustaw maxDate. Teraz dostaję moje pudełko wyboru roku od 2004, a nie 1900.

Mam nadzieję, że to pomoże innym.

P.S: Wszystkie pozostałe rozwiązania zostały przetestowane. Są bardzo powolne, a niektóre z nich nie działają tak dobrze (szczególnie te starsze - ustawia na bieżący rok zamiast na przykład 2004).