Ich verwende das jQuery UI Datepicker -Plugin in einer meiner Anwendungen, die mit CodeIgniter. Und es funktioniert gut so, wie ich es erwartet hatte.
Jetzt arbeite ich an einem neuen Formular, in dem ich einen benutzerdefinierten Datumsbereich für das Datumsauswahlfeld benötige, aus dem der Benutzer ein Datum auswählen kann. Wenn der Benutzer zu dem Formular kommt, wird ein Dropdown-Feld für das Jahr angezeigt. Und sobald der Benutzer ein Jahr aus der Dropdown-Liste ausgewählt hat, hängt meine Funktionalität einige neue Felder an das Formular an. Ein Feld ist also Date Applied, ein Textfeld, und dort initialisiere ich den jQuery UI-Datepicker und er zeigt den Datepicker an, wenn sich der Benutzer auf dieses Feld konzentriert.
Das habe ich also bisher getan. Lassen Sie mich nun das Problem erklären. Gemäß der Auswahl des Benutzerjahres vom ersten Schritt an möchte ich die Auswahl Date Applied einschränken. Wenn der Benutzer 2014 ausgewählt hat, möchte ich dem Benutzer erlauben, 1 Oct, 2014 bis 30 Sep, 2015 auszuwählen. Der Bereich month ist also immer 1 Oct - 30 Sep und das Jahr ist selected year - selected year + 1.
Einige weitere Beispiele:
- 2010 -
1 Oct, 2010bis30 Sept, 2011 - 2015 -
1 Oct, 2015bis30 Sept, 2016 - 2016 -
1 Oct, 2016bis30 Sept, 2017
Bitte lassen Sie mich wissen, ob mir jemand beim Einstellen dieses benutzerdefinierten dynamischen Datumsbereichs im jQuery UI-Datumsauswahlprogramm helfen kann.
3 Antworten
Ich kann es zum Laufen bringen. Unten finden Sie die Codes, die mein Problem lösen.
var firstYear = userYear;
var endYear = userYear + 1;
$( ".addDatePickerTransfer" ).datepicker({
yearRange: "'" + firstYear + ":" + endYear + "'",
minDate: new Date(firstYear, 10 - 1, 1),
maxDate: new Date(endYear, 9 - 1, 30)
});
HINWEIS: userYear ist der Wert, den ich vom vom Benutzer ausgewählten Jahreswert erhalten habe.
Wie in diesem Beispiel setzen Sie beim Datepicker-Abschlussereignis neue minDate und {{X1} } Werte.
$("#to").datepicker({
onClose: function(selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
Sie können den Jahresbereich mithilfe dieser Option gemäß Dokumentation hier festlegen. http://api.jqueryui.com/ datepicker / # option-yearRange
$( ".selector" ).datepicker({
yearRange: "2002:2012"
});
oder
$( ".selector" ).datepicker({
yearRange: "-50:+0"//last 50 year
});