Datum im <select> Block vorbelegen

stathis2000 · 21. Dezember 2004

Hi Leute, ich brauch mal wieder eure Hilfe.

Wie man das aktuelle Datum ausgibt weiss ich, aber mein Problem ist es, ich habe 3 Felder <select>, bei den man runterscrollen kann und im ersten den gewünschten Tag, im zweiten den gewünschten Monat und im dritten das gewünschte Jahr auswählen kann. Nun meine Frage kann ich diese drei Felder vorbelegen mit dem jeweils aktuellem Datum + 1Tag?

Vielend Dank für eure Hilfe im voraus.

Grüße
Stathis

Quaese · 21. Dezember 2004

Hi,

mit setDate() kannst Du den Monatstag setzen. Sind dateNow und dateOut Date-Objekte,
die das aktuelle Datum besitzen, kannst Du mit

Code:

dateOut.setDate((dateNow.getDate()+1));

das Folgedatum ermitteln. Findet ein Monats- oder Jahresübergang statt, wird dies ebenfalls
berücksichtigt.

Willst Du drei Select-Gruppen aufbauen, wobei die erste Gruppe jeweils die Tage zum aktuell
gewählten Monat und Jahr anzeigt, könnte Dir folgender Code weiterhelfen.

Code:

<script type="text/javascript">
  <!--
function updateDays(objForm){
    var dateNew = new Date(objForm.selJahr[objForm.selJahr.selectedIndex].value,
                      objForm.selMonat[objForm.selMonat.selectedIndex].value,
                      1);
    var intMonat = dateNew.getMonth();
    var i = 1;

    objForm.selTag.options.length = 0;
    // Solange es sich um den aktuellen Monat handelt
    while(intMonat == dateNew.getMonth()){
        // Monatsersten selektieren, sonst normale Option
        strEntry = (i == 1) ? new Option(i, i, false, true) : new Option(i, i, false, false);
        // Neue Option an Select-Gruppe hinten anhängen
        objForm.selTag.options[objForm.selTag.length] = strEntry;

        // Monatstag inkrementieren
        dateNew.setDate(dateNew.getDate() + 1);

        // Zählvariable inkrementieren
        i++;
    }
}

var arrMonate = new Array();
arrMonate[0]  = "Januar";
arrMonate[1]  = "Februar";
arrMonate[2]  = "März";
arrMonate[3]  = "April";
arrMonate[4]  = "Mai";
arrMonate[5]  = "Juni";
arrMonate[6]  = "Juli";
arrMonate[7]  = "August";
arrMonate[8]  = "September";
arrMonate[9]  = "Oktober";
arrMonate[10] = "November";
arrMonate[11] = "Dezember";

var dateNow = new Date();  // Aktuelles Datum
var dateOut = new Date();  // Nimmt nächsten Tag auf
var dateNew = new Date( dateNow.getFullYear(), dateNow.getMonth(), 1);  // Datum zum Monatsersten
var intMonat = dateNew.getMonth();  // Aktuellen Monat auslesen
var i = 1;  // Zählvariable initialisieren

// Nächsten Tag bestimmen
dateOut.setDate((dateNow.getDate()+1));

// Formular beginnen
document.write("<form name=\"formDate\" action=\"\" method=\"\">");

    // Select-Gruppe zu Monatstagen aufbauen
    document.write("<select name=\"selTag\" size=\"1\">");

    // Solange es sich um den aktuellen Monat handelt
    while(intMonat == dateNew.getMonth()){
        // Falls es sich beim Monatstag um den Folgetag des aktuellen Datums handelt
        if(i == parseInt(dateOut.getDate())){
            document.write("<option value=\""+i+"\" selected />"+i);
        }else{
            document.write("<option value=\""+i+"\" />"+i);
        }
        // Monatstag inkrementieren
        dateNew.setDate(dateNew.getDate() + 1);

        // Zählvariable inkrementieren
        i++;
    }
    document.write("<\/se"+"lect>");

    // Select-Gruppe zu Monaten aufbauen
    document.write("<select name=\"selMonat\" size=\"1\" onchange=\"updateDays(this.form, 'selTag');\">");
    // Monate durchlaufen
    for(var i=0; i<=11; i++){
        // Falls es sich um den Monat des Folgetages des aktuelle Datums handelt
        if(i == parseInt(dateOut.getMonth())){
            document.write("<option selected value=\""+i+"\" />"+arrMonate[i]);
        }else{
            document.write("<option value=\""+i+"\" />"+arrMonate[i]);
        }
    }
    document.write("<\/se"+"lect>");

    // Select-Gruppe zu Jahren aufbauen
    document.write("<select name=\"selJahr\" size=\"1\" onchange=\"updateDays(this.form, 'selTag');\">");
    // Jahre ab 1999 bis 2020 durchlaufen (kann beliebig angepasst werden)
    for(var i=1999; i<=2020; i++){
        // Falls es sich um das Jahr des Folgetages des aktuellen Datums handelt
        if(i == parseInt(dateOut.getFullYear())){
            document.write("<option value=\""+i+"\" selected />"+i);
        }else{
            document.write("<option value=\""+i+"\" />"+i);
        }
    }
    document.write("<\/se"+"lect>");

document.write("<\/fo"+"rm>");
  -->
</script>

Das Script berücksichtigt auch die unterschiedliche Tagesanzahl in verschiedenen Monaten,
sowie Schaltjahre.

Ich hoffe, das bringt Dich weiter.

Ciao
Quaese

stathis2000 · 21. Dezember 2004

Boahhh!

Du bist ja unglaublich Von wo hast du denn dass den her?!
Genau das habe ich gebraucht!

Vielen vielen Dank!

Grüße
Stathis

stathis2000 · 21. Dezember 2004

Eine Sache noch! Wenn ich statts den Tagen 1, 2, 3, 4, 5, ..es so haben will 01, 02, 03, 04, 05,.... wo muss ich da was verändern? Muss ich die Funktion getDate() verändern?

Quaese · 21. Dezember 2004

Hi,

zunächst: Wo hast Du das her? - aus meinem Kopf!

Um die Monatstage immer zweistellig zu formatieren, musst Du zwei Stellen im Script ändern.

1. Suche folgende Passage

Code:

// Monatsersten selektieren, sonst normale Option
strEntry = (i == 1) ? new Option(i, i, false, true) : new Option(i, i, false, false);

und ersetze sie durch

Code:

// Datum formatieren
strDatum = (i < 10) ? "0" + i : i ;
// Monatsersten selektieren, sonst normale Option
strEntry = (i == 1) ? new Option(strDatum, strDatum, false, true) : new Option(strDatum, strDatum, false, false);

2. Such als nächstes diese Passage

Code:

// Falls es sich beim Monatstag um den Folgetag des aktuellen Datums handelt
if(i == parseInt(dateOut.getDate())){
    document.write("<option value=\""+i+"\" selected />"+i);
}else{
    document.write("<option value=\""+i+"\" />"+i);
}

und ersetze sie hierdurch

Code:

// Datum formatieren
strDatum = (i < 10) ? "0" + i : i ;
// Falls es sich beim Monatstag um den Folgetag des aktuellen Datums handelt
if(i == parseInt(dateOut.getDate())){
    document.write("<option value=\""+strDatum+"\" selected />"+strDatum);
}else{
    document.write("<option value=\""+strDatum+"\" />"+strDatum);
}

Ciao
Quaese

stathis2000 · 22. Dezember 2004

Echt vielen vielen Dank! Bist mir echt eine große Hilfe!
Ich weiss garnicht wie ich mich bedanken soll!

Eine letzte Frage noch:
Ich muss auch die amerikanische Version des Datums haben. Ich habe einfach die <select> Felder gedreht MM/DD/YYYY
Siehe Code:

HTML:

<script type="text/javascript">
    <!--
  function updateDays(objForm){
  	var dateNew = new Date(objForm.selJahr[objForm.selJahr.selectedIndex].value,
 					 objForm.selMonat[objForm.selMonat.selectedIndex].value,
  					  1);
  	var intMonat = dateNew.getMonth();
  	var i = 1;
  
  	objForm.selTag.options.length = 0;
  	// Solange es sich um den aktuellen Monat handelt
  	while(intMonat == dateNew.getMonth()){
  		// Monatsersten selektieren, sonst normale Option
  		// Datum formatieren
  strDatum = (i < 10) ? "0" + i : i ;
  // Monatsersten selektieren, sonst normale Option
  strEntry = (i == 1) ? new Option(strDatum, strDatum, false, true) : new Option(strDatum, strDatum, false, false);
  		// Neue Option an Select-Gruppe hinten anhängen
  		objForm.selTag.options[objForm.selTag.length] = strEntry;
  
  		// Monatstag inkrementieren
  		dateNew.setDate(dateNew.getDate() + 1);
  
  		// Zählvariable inkrementieren
  		i++;
  	}
  }
  
  var arrMonate = new Array();
  arrMonate[0]  = "01";
  arrMonate[1]  = "02";
  arrMonate[2]  = "03";
  arrMonate[3]  = "04";
  arrMonate[4]  = "05";
  arrMonate[5]  = "06";
  arrMonate[6]  = "07";
  arrMonate[7]  = "08";
  arrMonate[8]  = "09";
  arrMonate[9]  = "10";
  arrMonate[10] = "11";
  arrMonate[11] = "12";
  
  var dateNow = new Date();  // Aktuelles Datum
  var dateOut = new Date();  // Nimmt nächsten Tag auf
  var dateNew = new Date( dateNow.getFullYear(), dateNow.getMonth(), 1);  // Datum zum Monatsersten
  var intMonat = dateNew.getMonth();  // Aktuellen Monat auslesen
  var i = 1;  // Zählvariable initialisieren
  
  // Nächsten Tag bestimmen
  dateOut.setDate((dateNow.getDate()+1));
  
  // Formular beginnen
  document.write("<form name=\"formDate\" action=\"\" method=\"\">");
  
     
  
  	// Select-Gruppe zu Monaten aufbauen
 	document.write("<select name=\"selMonat\" size=\"1\" onchange=\"updateDays(this.form, 'selTag');\">");
  	// Monate durchlaufen
  	for(var i=0; i<=11; i++){
  		// Falls es sich um den Monat des Folgetages des aktuelle Datums handelt
  		if(i == parseInt(dateOut.getMonth())){
  		    document.write("<option selected value=\""+i+"\" />"+arrMonate[i]);
  		}else{
  		    document.write("<option value=\""+i+"\" />"+arrMonate[i]);
  		}
  	}
  	document.write("<\/se"+"lect>/");
  	 // Select-Gruppe zu Monatstagen aufbauen
  	document.write("<select name=\"selTag\" size=\"1\">");
  
  	// Solange es sich um den aktuellen Monat handelt
  	while(intMonat == dateNew.getMonth()){
  		// Falls es sich beim Monatstag um den Folgetag des aktuellen Datums handelt
  	   // Datum formatieren
  strDatum = (i < 10) ? "0" + i : i ;
  // Falls es sich beim Monatstag um den Folgetag des aktuellen Datums handelt
  if(i == parseInt(dateOut.getDate())){
  	document.write("<option value=\""+strDatum+"\" selected />"+strDatum);
  }else{
  	document.write("<option value=\""+strDatum+"\" />"+strDatum);
  }
  		// Monatstag inkrementieren
  		dateNew.setDate(dateNew.getDate() + 1);
  
  		// Zählvariable inkrementieren
  		i++;
  	}
  	document.write("<\/se"+"lect>/");
  
  	// Select-Gruppe zu Jahren aufbauen
 	document.write("<select name=\"selJahr\" size=\"1\" onchange=\"updateDays(this.form, 'selTag');\">");
  	// Jahre ab 1999 bis 2020 durchlaufen (kann beliebig angepasst werden)
  	for(var i=2004; i<=2020; i++){
  		// Falls es sich um das Jahr des Folgetages des aktuellen Datums handelt
  		if(i == parseInt(dateOut.getFullYear())){
  		    document.write("<option value=\""+i+"\" selected />"+i);
  		}else{
  			document.write("<option value=\""+i+"\" />"+i);
  		}
  	}
  	document.write("<\/se"+"lect>");
  
  document.write("<\/fo"+"rm>");
    -->
  </script>

Das Problem beim ersten Aufruf sind in der Spalte Tage das sie ab dem 12 aufgezählt werden, es übernimmt den Start von dem aktuellen Monat und die Tage gehen bis 42.

Sobald man aber den Monat vorne ändert ist alles wieder ok.
Also es ist eine Einstellung vorzunehmen mit dem ersten Aufruf der Seite!
Kannst du mir btte da nochmal weiterhelfen?

Ich danke Dir vielmals!

Gruß,
Stathis

Quaese · 22. Dezember 2004

Hi,

Dein Problem liegt darin begründet, dass die Zählvariable i zu Beginn initialisiert wird. Als
die Monatstage zuerst ausgegeben wurden, war das auch korrekt. Da jetzt aber zunächst die
Monate abgearbeitet werden, steht die Variable anschliessen auf dem Wert 12. Es muss also
folgende Zeile (Vorsicht: nicht die Zeile aus der Funktion)

Code:

var i = 1;  // Zählvariable initialisieren

an folgende Stelle verschoben werden:

Code:

var i = 1;  // Zählvariable initialisieren
// Solange es sich um den aktuellen Monat handelt
while(intMonat == dateNew.getMonth()){
    ...

Damit wird die Zählvariable für die Monatstage auf 1 zurückgesetzt, bevor die Tage abgearbeitet
werden.

Ciao
Quaese

stathis2000 · 22. Dezember 2004

Vielen vielen Dank! Jetzt hast Du mich wunschlos glücklich gemacht!
Es klappt hervorragend!

Viele Grüße,
Stathis

Datum im <select> Block vorbelegen

stathis2000

Mitglied

Quaese

Moderator

stathis2000

Mitglied

stathis2000

Mitglied

Quaese

Moderator

stathis2000

Mitglied

Quaese

Moderator

stathis2000

Mitglied

Neue Beiträge