jQuery Datepicker Jahre angezeigt

78

Wie ändert man mit dem jQuery-Datepicker den angezeigten Jahresbereich? Auf der jQuery-UI-Site heißt es, der Standardwert sei "10 Jahre vor und nach dem aktuellen Jahr werden angezeigt". Ich möchte dies für eine Geburtstagsauswahl verwenden und 10 Jahre vor heute ist nicht gut. Kann dies mit dem jQuery-Datepicker durchgeführt werden oder muss ich eine andere Lösung verwenden?

Link zur Datepicker-Demo: http://jqueryui.com/demos/datepicker/#dropdown-month-year

John Boker
quelle

Antworten:

165

Wenn Sie die Demoseite ein wenig nach unten schauen, sehen Sie einen Abschnitt "Datepicker einschränken". Verwenden Sie die Dropdown-Liste, um die " Year dropdown shows last 20 years" Demo anzugeben , und klicken Sie auf " Ansichtsquelle":

$("#restricting").datepicker({ 
    yearRange: "-20:+0", // this is the option you're looking for
    showOn: "both", 
    buttonImage: "templates/images/calendar.gif", 
    buttonImageOnly: true 
});

Sie wollen das Gleiche tun (natürlich Wechsel -20zu -100oder etwas).

Shog9
quelle
Vielen Dank! Ich habe dort durchgesehen, muss es aber verpasst haben. Es funktioniert perfekt.
John Boker
1
Ich versuche dies zu verwenden, aber es werden nur -20 Jahre ab dem aktuell ausgewählten Datum angezeigt ...?
Ajbeaven
5
Sie können auch canstelle von verwenden +0, alsoyearRange: "-20:c",
Kokos
40

Warum nicht die Auswahlfelder für Jahr oder Monat anzeigen?

$( ".datefield" ).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange:'-90:+0'
});
Plippie
quelle
1
wahrscheinlich sollten Anführungszeichen um den Jahresbereich sein.
Eonasdan
Das ist genau das, wonach ich suche. Danke, Sir. changeMonth, changeYear
kebyang
Das ist eine perfekte Antwort! Vielen Dank!
DmitryBoyko
10

Was sonst niemand gesagt hat, ist, dass Sie auch fest codierte Datumsbereiche festlegen können:

zum Beispiel:

yearRange: "1901:2012"

Es kann zwar ratsam sein, dies nicht zu tun, es ist jedoch eine Option, die durchaus gültig ist (und nützlich ist, wenn Sie zu Recht nach einem bestimmten Jahr in einem Katalog suchen - beispielsweise "1963: 1984").

Warren Sergent
quelle
6

Perfekt für Felder mit Geburtsdatum (und was ich benutze) ähnelt dem, was Shog9 gesagt hat, obwohl ich ein spezifischeres DOB-Beispiel geben werde:

$(".datePickerDOB").datepicker({ 
    yearRange: "-122:-18", //18 years or older up to 122yo (oldest person ever, can be sensibly set to something much smaller in most cases)
    maxDate: "-18Y", //Will only allow the selection of dates more than 18 years ago, useful if you need to restrict this
    minDate: "-122Y"
});

Hoffe zukünftige Googler finden das nützlich :).

Einzelgänger
quelle
Die älteste Person ist Jeanne Calmant und war 122 Jahre alt. Ich würde es auf 140 setzen, um etwas Spielraum zu halten :)
Christophe Roussy
@ChristopheRoussy Du hast recht, ich glaube ich habe an die älteste lebende Person gedacht ... die jetzt 116 ist :). Antwort bearbeitet.
Maverick
5

Zusätzlich zu dem, was @ Shog9 gepostet hat, können Sie die Daten in der Funktion beforeShowDay: callback auch einzeln einschränken.

Sie geben eine Funktion an, die ein Datum annimmt und ein boolesches Array zurückgibt:

"$(".selector").datepicker({ beforeShowDay: nationalDays}) 
natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], 
[5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], [9, 7, 
'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']]; 
function nationalDays(date) { 
    for (i = 0; i < natDays.length; i++) { 
      if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == 
natDays[i][1]) { 
        return [false, natDays[i][2] + '_day']; 
      } 
    } 
  return [true, '']; 
} 
JamesSugrue
quelle
Was ist falsch an der Syntaxhervorhebung hier? und was ist mit nationalDays los? Ich verstehe Ihren Code leider nicht, wenn Sie das klären könnten?
Knocte
3
 $("#DateOfBirth").datepicker({
        yearRange: "-100:+0",
        changeMonth: true,
        changeYear: true,
    });

yearRange: '1950: 2013', // Angabe eines fest codierten Jahresbereichs oder auf diese Weise

yearRange: "-100: +0", // letzte hundert Jahre

Es wird hilfreich sein, Dropdown-Listen für die Auswahl von Jahr und Monat anzuzeigen.

Manish
quelle
2

au, nz, dh usw. sind die Ländercodes für die Länder, deren Nationalfeiertage angezeigt werden (Australien, Neuseeland, Irland, ...). Wie im Code zu sehen ist, werden diese Werte mit '_day' kombiniert und zurückgegeben, um als CSS-Stil auf diesen Tag angewendet zu werden. Die entsprechenden Stile haben die unten gezeigte Form, die den Text für diesen Tag aus dem Weg räumt und durch ein Bild der Landesflagge ersetzt.

.au_day {
  text-indent: -9999px;
  background: #eee url(au.gif) no-repeat center;
}

Der 'falsche' Wert, der mit dem neuen Stil zurückgegeben wird, zeigt an, dass diese Tage möglicherweise nicht ausgewählt sind.

etw
quelle
1

Ich denke, das könnte auch funktionieren

$(function () {
    $(".DatepickerInputdob").datepicker({
        dateFormat: "d M yy",
        changeMonth: true,
        changeYear: true,
        yearRange: '1900:+0',
        defaultDate: '01 JAN 1900'
    });
Himansz
quelle