jQuery-Benutzeroberfläche: Datepicker hat die Dropdown-Liste für den Jahresbereich auf 100 Jahre festgelegt

301

Bei Verwendung des Datepickers werden in der Dropdown-Liste Jahr standardmäßig nur 10 Jahre angezeigt. Der Benutzer muss auf das letzte Jahr klicken, um weitere Jahre hinzuzufügen.

Wie können wir den anfänglichen Bereich auf 100 Jahre einstellen, damit der Benutzer standardmäßig eine große Liste sieht?

Geben Sie hier die Bildbeschreibung ein

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }
Ian Vink
quelle
@dmaij: Wenn nur ein Blick auf die API-Dokumente nicht geantwortet hätte ... Aber ja, das Bild ist wunderschön ... :-)
TJ Crowder
@TJCrowder Es sollte eine Regel geben, dass Fragen so aussehen. Und tatsächlich hätte ein Blick in die API-Dokumente Zeit sparen können, um das Bild zu erstellen.
dmaij
11
@TJCrowder Gut, dass es eine API gibt. Aber ich habe gerade "jquery datepicker year range" gegoogelt und dies gefunden. Beantwortung meiner Frage in 10 Sekunden. Schneller als mit einer API.
Edwin Stoteler

Antworten:

573

Sie können den Jahresbereich mithilfe dieser Option gemäß der Dokumentation hier http://api.jqueryui.com/datepicker/#option-yearRange festlegen

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

oder so

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

Aus den Dokumenten

Standard: "c-10: c + 10"

Der in der Dropdown-Liste für das Jahr angezeigte Bereich von Jahren: entweder relativ zum heutigen Jahr ("-nn: + nn"), relativ zum aktuell ausgewählten Jahr ("c-nn: c + nn"), absolut ("nnnn: nnnn ") oder Kombinationen dieser Formate (" nnnn: -nn "). Beachten Sie, dass diese Option nur das betrifft, was in der Dropdown-Liste angezeigt wird. Um einzuschränken, welche Daten ausgewählt werden dürfen, verwenden Sie die Optionen minDate und / oder maxDate.

ᾠῗᵲ ᄐ ᶌ
quelle
5
Hatte Probleme, bevor mir klar wurde, dass das +Schild erforderlich ist.
th1rdey3
1
Vielen Dank, harte Codierung auf diese Weise JahrRange: '1950: 2013' hat funktioniert
Ronald Nsabiyera
1
für jQuey-Ui yearRange: "c-100: + c + 10" funktioniert gut, wobei c für das aktuelle Jahr steht
TechieBrij
2
@ TechieBrij Dies ist hilfreich, aber es soll seinc-100:c+10
DreamTeK
3
@Obsidian cbedeutet eigentlich "Aktuelles ausgewähltes Jahr" und nicht aktuelles Jahr api.jqueryui.com/datepicker/#option-yearRange
ᾠῗᵲ ᄐ ᶌ
19

Das hat bei mir perfekt funktioniert.

ChangeYear: - Wenn diese Option auf true gesetzt ist, können die im Kalender des aktuellen Monats angegebenen Zellen des vorherigen oder nächsten Monats ausgewählt werden. Diese Option wird verwendet, wenn options.showOtherMonths auf true gesetzt ist.

YearRange: - Gibt den Bereich der Jahre in der Dropdown-Liste an. (Standardwert: "-10: +10")

Beispiel:-

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

Siehe: - Jahresbereich in jquery datepicker einstellen

Ranju
quelle
6

Ich war das:

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

Wo 50ist der Bereich vom laufenden Jahr.

Lernender88
quelle
4

Sie können den Jahresbereich mit dieser Option in jQuery UI datepicker festlegen:

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
Sanjib Debnath
quelle
2
Vielen Dank für die Beispiele
Jay
1

Dies ist etwas spät am Tag, um dies vorzuschlagen, da die ursprüngliche Frage vor langer Zeit veröffentlicht wurde, aber das habe ich getan.

Ich brauchte eine Reichweite von 70 Jahren, die zwar nicht 100 Jahre beträgt, aber dennoch zu viele Jahre sind, als dass der Besucher sie durchblättern könnte. (jQuery geht zwar in Gruppen durch das Jahr, aber das ist für die meisten Menschen ein Problem.)

Der erste Schritt bestand darin, das JavaScript für das Datepicker-Widget zu ändern: Suchen Sie diesen Code in jquery-ui.js oder jquery-ui-min.js (wo er minimiert wird):

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

Und ersetzen Sie es durch:

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

Dies umgibt die Jahrzehnte (mit Ausnahme der aktuellen) mit OPTGROUP-Tags.

Fügen Sie dies als Nächstes Ihrer CSS-Datei hinzu:

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

Dies verbirgt die Jahrzehnte, bis der Besucher im Basisjahr mauset. Ihr Besucher kann schnell durch eine beliebige Anzahl von Jahren scrollen.

Fühlen Sie sich frei, dies zu verwenden; Bitte geben Sie in Ihrem Code die richtige Zuordnung an.

Garison Piatt
quelle
1

Ich wollte den Datepicker implementieren, um das Geburtsdatum auszuwählen, und hatte Probleme, das zu ändern, yearRangeda es mit meiner Version (1.5) nicht zu funktionieren schien. Ich habe hier auf die neueste jquery-ui-Datepicker-Version aktualisiert: https://github.com/uxsolutions/bootstrap-datepicker .

Dann fand ich heraus, dass sie dieses sehr hilfreiche On-the-Fly-Tool bereitstellen, sodass Sie Ihren gesamten Datepicker konfigurieren und sehen können, welche Einstellungen Sie verwenden müssen.

So fand ich heraus, dass die Option

defaultViewDate

ist die Option, nach der ich gesucht habe und bei der Suche im Web wurden keine Ergebnisse gefunden.

Also für andere Benutzer: Wenn Sie auch den Datumspicker zum Ändern des Geburtsdatums bereitstellen möchten, empfehle ich, diese Codeoptionen zu verwenden:

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

Wenn Sie den Datepicker öffnen, beginnen Sie mit der Ansicht, die Jahre vor 20 Jahren relativ zum aktuellen Jahr auszuwählen.

AlexioVay
quelle