jQuery UI: Datepicker ustawia zakres roku na 100 lat

Przy użyciu Datepicker domyślnie rok rozwijany pokazuje tylko 10 lat. Użytkownik musi kliknąć ostatni rok, aby dodać więcej lat.

Jak możemy ustawić początkowy zakres na 100 lat, aby użytkownik domyślnie zobaczył dużą listę?

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

Możesz ustawić zakres roku za pomocą tej opcji według dokumentacji tutaj http://api.jqueryui.com/datepicker/#option-yearRange

yearRange: '1950:2013', // specifying a hard coded year range

lub w ten sposób

yearRange: "-100:+0", // last hundred years

Z Dokumentów

Domyślnie: „c-10: c + 10”

Zakres lat wyświetlany w menu rozwijanym roku: albo w stosunku do bieżącego roku („-nn: + nn”), w stosunku do aktualnie wybranego roku („c-nn: c + nn”), bezwzględny („nnnn: nnnn ”) lub kombinacje tych formatów („ nnnn: -nn ”). Zauważ, że ta opcja wpływa tylko na to, co pojawia się w menu rozwijanym, aby ograniczyć wybrane daty, użyj opcji minDate i / lub maxDate.

To działało idealnie dla mnie.

ChangeYear: - Po ustawieniu na wartość true wskazuje, że można wybrać komórki z poprzedniego lub następnego miesiąca wskazane w kalendarzu bieżącego miesiąca. Ta opcja jest używana z options.showOtherMonths ustawionymi na wartość true.

YearRange: - Określa zakres lat w menu rozwijanym roku. (Wartość domyślna: „-10: +10 ″)

Przykład:-

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

Odwołaj się: - ustaw zakres lat w datowniku jquery

Ja to zrobiłem:

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

gdzie 50jest zakres z bieżącego roku.

Możesz ustawić zakres roku za pomocą tej opcji w narzędziu wyboru jQuery UI:

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

To trochę za późno na dzień, by to zasugerować, biorąc pod uwagę, jak dawno temu zostało opublikowane oryginalne pytanie, ale to właśnie zrobiłem.

Potrzebowałem okresu 70 lat, który, mimo że nie tak duży jak 100, to wciąż zbyt wiele lat, aby odwiedzający mógł je przewijać. (jQuery przechodzi przez cały rok w grupach, ale dla większości ludzi to problem.)

Pierwszym krokiem była modyfikacja JavaScript dla widgetu datepicker: Znajdź ten kod w jquery-ui.js lub jquery-ui-min.js (gdzie zostanie zminimalizowany):

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

I zamień to na:

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

Otacza to dziesięciolecia (z wyjątkiem obecnych) tagami OPTGROUP.

Następnie dodaj to do pliku CSS:

.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }

To ukrywa dziesięciolecia, dopóki odwiedzający nie myszy w ciągu roku bazowego. Twój gość może szybko przewijać dowolną liczbę lat.

Zapraszam do korzystania z tego; po prostu proszę podać poprawne informacje o kodzie w swoim kodzie.

Chciałem zaimplementować datepicker, aby wybrać datę urodzenia i miałem problemy ze zmianą, yearRangeponieważ wydaje się, że nie działa z moją wersją (1.5). Zaktualizowałem do najnowszej wersji datepicker jquery-ui tutaj: https://github.com/uxsolutions/bootstrap-datepicker .

Potem dowiedziałem się, że zapewniają to bardzo pomocne narzędzie w locie, dzięki czemu możesz skonfigurować cały datepicker i zobaczyć, jakich ustawień musisz użyć.

W ten sposób dowiedziałem się, że ta opcja

defaultViewDate

jest opcją, której szukałem i nie znalazłem żadnych wyników w sieci.

Tak więc dla innych użytkowników: jeśli chcesz również podać datownik do zmiany daty urodzenia, sugeruję użyć następujących opcji kodu:

$('#birthdate').datepicker({
    startView: 2,
    maxViewMode: 2,
    daysOfWeekHighlighted: "1,2",
    defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});

Po otwarciu narzędzia wyboru daty zaczniesz od wyboru lat 20 lat temu w stosunku do bieżącego roku.