✔ [jQuery] minDate und maxDate mit Jahreswechsel

supercat1510

supercat1510

Erfahrenes Mitglied
Folgendes möchte ich erreichen:

Über den Datepicker darf nur ein Datum zwischen dem 1. April und dem 3. Oktober ausgewählt werden - und das jedes Jahr.
(Rest ist Betriebsurlaub einer Pension)

Mit dem unten stehenden Code habe ich schon mal geschafft den Datum einzugrenzen, allerdings beschränkt sich das auf das aktuelle Jahr. Wer also für das darauffolgende Jahr buchen möchte, kann nicht auf 2013 wechseln.

Wie muss ich den Code erweitern/umschreiben, dass ich die Jahre weiterschalten kann?


Code: 
		var jetzt = new Date();
		var Jahr = jetzt.getFullYear();
		$("#anreise").datepicker("option","minDate", new Date(Jahr,3,1));
		$("#anreise").datepicker("option","maxDate", new Date(Jahr,9,3));
		$("#abreise").datepicker("option","minDate", new Date(Jahr,3,1));
		$("#abreise").datepicker("option","maxDate", new Date(Jahr,9,3));
 
Hi supercat1510!

Also letztlich steht in der Variable "Jahr" ja nur 2012.
D.h. du musst, wenn der Kunde 2013 auswählt oder anclickt,
die Funktion erneut aufrufen und es so umschreiben, dass "Jahr" nun mit 2013 definiert ist.
Wie z.B.:
Code: 
function funktionsname(wann){
        var Jahr = wann;
        $("#anreise").datepicker("option","minDate", new Date(Jahr,3,1));
        $("#anreise").datepicker("option","maxDate", new Date(Jahr,9,3));
        $("#abreise").datepicker("option","minDate", new Date(Jahr,3,1));
        $("#abreise").datepicker("option","maxDate", new Date(Jahr,9,3));
}

den Aufruf der Funktion machst du bei 2012 mit funktionsname('2012');,
bei 2013 mit funktionsname('2013'); usw.

Besser beschreiben könnte ich es natürlich, wenn man auch sieht,
wie die Funktion aufgerufen wird...

Grüße!
 
Das ganze Script lautet so:

Code: 
/* ### Beginn ### */
        $("#anreise").datepicker({showOn: 'button', buttonImage: 'images/calendar.jpg', buttonImageOnly: true, dateFormat: 'dd.mm.yy', monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],yearRange: "c:+5"});		
        $("#abreise").datepicker({showOn: 'button', buttonImage: 'images/calendar.jpg', buttonImageOnly: true, dateFormat: 'dd.mm.yy', monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],yearRange: "c:+5"});
		var jetzt = new Date();
		var Jahr = jetzt.getFullYear();
		$("#anreise").datepicker("option","minDate", new Date(Jahr,3,1));
		$("#anreise").datepicker("option","maxDate", new Date(Jahr,9,3));
		$("#abreise").datepicker("option","minDate", new Date(Jahr,3,1));
		$("#abreise").datepicker("option","maxDate", new Date(Jahr,9,3));

und wird über:
HTML: 
        <input name="anreise" type="text" id="anreise" size="10" />
aufgerufen
 
ahh.. okok.
ich kenn zwar den datenpicker nicht aber probier es mal so...

Code: 
/* ### Beginn ### */
        $("#anreise").datepicker({showOn: 'button', buttonImage: 'images/calendar.jpg', buttonImageOnly: true, dateFormat: 'dd.mm.yy', monthNames: ['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],yearRange: "c:+5"});        
        $("#abreise").datepicker({showOn: 'button', buttonImage: 'images/calendar.jpg', buttonImageOnly: true, dateFormat: 'dd.mm.yy', monthNames: ['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],yearRange: "c:+5"});

	var Jahr = new Array(2012,2013,2014); 
	for ( i = 0; i < Jahr.length; i++) {
		$("#anreise").DatePicker("option", "minDate", new Date(Jahr[i], 3, 1));
		$("#anreise").DatePicker("option", "maxDate", new Date(Jahr[i], 9, 3));
            //Weiß nicht ob die underen zwei Zeilen überflüßig sind...
		//$("#abreise").DatePicker("option", "minDate", new Date(Jahr[i], 3, 1));
		//$("#abreise").DatePicker("option", "maxDate", new Date(Jahr[i], 9, 3));
	}

wenn es funktioniert, ist das für die Jahre 2012, 2013 und 2014.
 
Zuletzt bearbeitet:
sooo... hab mir den datepicker jetzt mal angeschaut...
das mit minDate und maxDate bringt dir, soweit ich das verstanden habe, nichts.
Du gibst dem Kalender somit ja nur diese begrenzte Zeit.
Aber mit diesem Code funktioniert es:

1. Du kannst mit jQuery mehrere Elemente selectieren, wenn mit diesen das gleiche geschieht.
In unserem Fall $("#anreise,#abreise")...
2. Mit onChangeMonthYear kannst du immer wieder abfragen, zu welchen Monat
gewechselt wird. Und mit setzen der Variable inst['drawMonth'] beinflusst du,
welcher Monat als nächstes gezeichnet wird. Das selbe mit dem Jahr und inst['drawYear']

Somit haben wir schon die gewünschten Monate...
Jetzt zu den Tag 1 - 3 im Monat Oktober.

4. Mit beforeShowDay kannst du jeden einzelnen Tag überprüfen, der im angeklickten Monat angezeigt wird.
Somit ist logisch, dass alle Tage, die größer 3 sind und sich im Monat Oktober befinden,
deaktiviert werden sollen.

Hier der funktionierente Code.

Code: 
	$("#anreise,#abreise").datepicker({
		showOn : 'button',
		buttonImage : 'images/calendar.jpg',
		buttonImageOnly : true,
		dateFormat : 'dd.mm.yy',
		monthNames : ['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
		yearRange : "c:+5",
		onChangeMonthYear : function(year, month, inst) {
			if (month == 11) {
				inst['drawMonth'] = 3;
				inst['drawYear'] = year + 1;
			}
			if (month == 3) {
				inst['drawMonth'] = 9;
				inst['drawYear'] = year - 1;
			}
		},
		beforeShowDay : function(date) {
			if (date.getDate() > 3 && date.getMonth()==9) {
				return [false, ""];
			} else {
				return [true, ""];
			}
		}

Grüße!
 
Achja... ganz vergessen.
Das minDate würd ich trotzdem auf den heutigen Tag setzten...
Einfach mit Javascript das aktuelle datum auslesen wie du es schon
von Anfang an getan hast, nur auch den aktuellen Tag und Monat.
Und dann mit minDate reinschreiben lassen.

Aber das musst du jetzt selber schaffen! ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück