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
quelle
c
anstelle von verwenden+0
, alsoyearRange: "-20:c",
Warum nicht die Auswahlfelder für Jahr oder Monat anzeigen?
$( ".datefield" ).datepicker({ changeMonth: true, changeYear: true, yearRange:'-90:+0' });
quelle
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").
quelle
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 :).
quelle
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, '']; }
quelle
$("#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.
quelle
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.
quelle
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' });
quelle