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

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?

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

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.

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

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.

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

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.

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.