wake-up-neo.com

jQuery UI: Datepicker hat das Dropdown-Menü für den Jahresbereich auf 100 Jahre festgelegt

Bei Verwendung des Datepickers werden 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 festlegen, damit der Benutzer standardmäßig eine große Liste sieht?

enter image description here

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }
jqueryjquery-uijquery-ui-datepicker
290
BahaiResearch.com

Sie können den Jahresbereich mit dieser Option per Dokumentation hier einstellen http://api.jqueryui.com/datepicker/#option-yearRange

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

oder so

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

Aus den Dokumenten 

Voreinstellung: "c-10: c + 10"

Der Bereich der Jahre, der im Dropdown-Menü für das Jahr angezeigt wird: 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 sich diese Option nur auf das auswirkt, was in der Dropdown-Liste angezeigt wird. Um einschränken zu können, welche Daten ausgewählt werden können, verwenden Sie die Optionen minDate und/oder maxDate.

541
ᾠῗᵲᄐᶌ

Das hat perfekt für mich funktioniert.

ChangeYear: - Wenn auf true gesetzt, werden die Zellen des vorherigen oder nächsten Monats im Kalender des aktuellen Monats angezeigt. kann ausgewählt werden. Diese Option wird mit options.showOtherMonths gesetzt .__ verwendet. um wahr zu sein.

YearRange: - Gibt den Bereich der Jahre in der Dropdown-Liste für das Jahr an. (Standardwert: "-10: +10")

Beispiel: -

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

Siehe: - Jahresbereich in jquery datepicker einstellen

15
Ranju

Ich tat dies:

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

wobei 50 der Bereich vom aktuellen Jahr ist.

4
learner88

Sie können den Jahresbereich mithilfe dieser Option in der 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
0
Sanjib Debnath

Dies ist etwas spät am Tag, da ich dies vorschlagen würde, da die ursprüngliche Frage schon vor langer Zeit veröffentlicht wurde. Dies ist jedoch das, was ich getan habe.

Ich brauchte einen Zeitraum von 70 Jahren, der zwar nicht einmal 100 Jahre alt ist, aber für den Besucher noch zu viele Jahre ist. (jQuery durchläuft das ganze Jahr in Gruppen, aber das ist für die meisten Leute ein Schmerz.)

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 ersetze es mit diesem:

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.

Als nächstes fügen Sie dies 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 blättern.

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

0
Garison Piatt

Ich wollte den Datepicker implementieren, um das Geburtsdatum auszuwählen, und ich hatte Probleme beim Ändern der yearRange, da dies mit meiner Version (1.5) nicht zu funktionieren schien. Ich habe hier die neueste Version des jquery-ui datepicker aktualisiert: https://github.com/uxsolutions/bootstrap-datepicker .

Dann habe ich herausgefunden, dass sie dieses sehr hilfreiche On-the-Fly-Tool zur Verfügung stellen, sodass Sie Ihr gesamtes Datepicker konfigurieren und sehen können, welche Einstellungen Sie verwenden müssen.

So fand ich die Option heraus 

defaultViewDate

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

Also für andere Benutzer: Wenn Sie auch den Datepicker bereitstellen möchten, um das Geburtsdatum zu ändern, empfehle ich die folgenden Code-Optionen:

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

Beim Öffnen des Datepickers beginnen Sie mit der Ansicht, um die Jahre vor 20 Jahren relativ zum aktuellen Jahr auszuwählen.

0
AlexioVay