jQuery Datepicker Jahre angezeigt

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

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).

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

$( ".datefield" ).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange:'-90:+0'
});

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").

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 :).

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, '']; 
} 

 $("#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.

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.

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'
    });