jQuery UI: Datepicker ustawia zakres roku na 100 lat


301

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ę?

wprowadź opis zdjęcia tutaj

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

@dmaij: Gdyby tylko rzut oka na dokumentację API nie odpowiedziałby na to ... Ale tak, obraz jest piękny ... :-)
TJ Crowder

@TJCrowder Powinna istnieć reguła, że ​​pytania wyglądają tak. I rzeczywiście, przeglądanie dokumentów API mogłoby zaoszczędzić czas na stworzenie obrazu ..
dmaij 13.12.12

11
@TJCrowder Dobrze, że istnieje interfejs API. Ale właśnie przeszukałem „zakres dat jperylarzy” i znalazłem to. Odpowiadając na moje pytanie za 10 sekund. Szybciej niż przy użyciu interfejsu API.
Edwin Stoteler

Odpowiedzi:


573

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.


5
Miałem kłopoty, zanim zdałem sobie sprawę, że +znak jest wymagany.
th1rdey3

1
Dzięki, kodowanie w ten sposób w ten sposób rok Zakres: „1950: 2013” ​​zadziałał
Ronald Nsabiyera

1
dla jQuey-Ui yearRange: „c-100: + c + 10” działa dobrze, gdzie c oznacza bieżący rok
TechieBrij

2
@TechieBrij Jest to pomocne, ale powinno byćc-100:c+10
DreamTeK

3
@Obsidian cfaktycznie oznacza „Bieżący wybrany rok”, a nie bieżący rok api.jqueryui.com/datepicker/#option-yearRange
ᾠῗᵲ ᄐ ᶌ

19

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


6

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.


4

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

2
Dzięki za przykłady
Jay

1

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.


1

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.