[FRAGE] Datetimepicker mit Tag auswahl

[caan069]

Hallo zusammen,
unzwar, ich hab einen Datetimepicker gebastelt der sich durch nen click aufs input feld öffnen und schließen lässt. Ich kann auch ohne probleme durch die einzelnen Monate switchen. Im nächsten schritt soll per mausklick auf eine zelle die mit einem Tag gefüllt ist ins input feld übertragen werden mit dem jeweiligen Monat und dem Jahr.

Ich bin da was überfragt

var DatumAktuell = new Date();	// Aktuelles Datum							
var MonatAktuell = DatumAktuell.getMonth()+1;	// Aktueller Monat
var JahrAktuell = DatumAktuell.getFullYear();	// Aktuelles Jahr

var Wochentag = new Array
("SO","MO","DI","MI","DO","FR","SA");

function TagText (Zahl) {
	return Wochentag[Zahl];
}

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

function tableCreate(year){
	function monatsTage(MonatAktuell, JahrAktuell) {  // Errechnet Anzahl der Tage im Monat (auch Schaltjahre)
	    if(MonatAktuell != 2) {
		        if(MonatAktuell == 9 ||
		           MonatAktuell == 4 ||
		           MonatAktuell == 6 ||
		           MonatAktuell == 11) {
		            return 30;
		        } else {
		            return 31;
		        }
		    } else {
		        return (JahrAktuell % 4) == "" && (JahrAktuell % 100) !="" ? 29 : 28;
		    }
		}
	
	var AnzahlTage = monatsTage(MonatAktuell, JahrAktuell);	// Anzahl Tage die ein Monat hat
		
	var DatumMonat = new Date();
	
	if(typeof year != "undefined"){
		DatumMonat.setFullYear(year);
	}

	DatumMonat.setDate(1);
		
	DatumMonat.setMonth(MonatAktuell-1);
	var ErsterTag = DatumMonat.getDay();
	var TagName = TagText(ErsterTag);
	document.getElementById("Monat").innerHTML = Monat_namen[MonatAktuell];
	document.getElementById("Jahr").innerHTML = JahrAktuell;
	console.log(TagName + ErsterTag);
	var dayCounter = 0;
	var count = 0;
    var body = document.body;
    var tbl  = document.createElement('table');
    tbl.style.width  = '250px';
    tbl.style.border = '0.5px solid #353535';
    tbl.style.textAlign = 'center';
	
	for(var k = 0; k < 1; k++){
		var tr = tbl.insertRow();
		for(var m = 0; m < 7; m++){
			var tk = tr.insertCell();
			tk.appendChild(document.createTextNode(Wochentag[m]));
			tk.style.color = '#353535';
		}
	}	
    for(var i = 0; i < 6; i++){
        var tr = tbl.insertRow();
        for(var j = 0; j < 7; j++){
            var td = tr.insertCell();
            td.id = "cell_" + count;
            count++;
        	td.style.color = 'white';
        	if(count >= ErsterTag +1 && dayCounter < AnzahlTage){
        		dayCounter++;
	        	td.appendChild(document.createTextNode(dayCounter));
        	}
        }
	}
    body.appendChild(tbl);
}	

document.getElementById('month-minus').onclick = function() {
        Monat_namen[MonatAktuell--];
        if(MonatAktuell < 1){
        	MonatAktuell = 12;
        	document.getElementById("Monat").innerHTML = Monat_namen[MonatAktuell];
        	JahrAktuell--;
        	document.getElementById("Jahr").innerHTML = JahrAktuell;
        }
        tableDelete();
        tableCreate(JahrAktuell);
        document.getElementsByTagName("table")[0].className = "show";	
    };
document.getElementById('month-plus').onclick = function() {
		Monat_namen[MonatAktuell++];
		if(MonatAktuell > 12){
			MonatAktuell = 1;
			document.getElementById("Monat").innerHTML = Monat_namen[MonatAktuell];
			JahrAktuell++;		
			document.getElementById("Jahr").innerHTML = JahrAktuell;
		}
		tableDelete();
        tableCreate(JahrAktuell);
        document.getElementsByTagName("table")[0].className = "show";	
	};


function tableDelete() {
	var tables = document.getElementsByTagName('table');
	while (tables.length > 0)
    tables[0].parentNode.removeChild(tables[0]);
}


function tableActivate() {
	document.getElementById('month-plus').style.cssText = 'display: block';
	document.getElementById('month-minus').style.cssText = 'display: block';
	document.getElementById('Monat').style.cssText = 'display: inline-block';
	document.getElementById('Jahr').style.cssText = 'display: inline-block';      
	document.getElementById("input-feld").focus(tableCreate());       
	if(document.getElementsByTagName("table")[0].className == "hide" || document.getElementsByTagName("table")[0].className == ""){           
		document.getElementsByTagName("table")[0].className = "show";	
	}
	else{
		document.getElementsByTagName("table")[0].className.set = "hide"; 
		tableDelete();
		document.getElementById('Monat').style.cssText = 'display: none';
		document.getElementById('Jahr').style.cssText = 'display: none';
		document.getElementById('month-plus').style.cssText = 'display: none';
		document.getElementById('month-minus').style.cssText = 'display: none';
	}
}

<input onclick="tableActivate()" id="input-feld" type="datetime" name="Datum" placeholder="DD.MM.YYYY">
	
	<div id="button">
		<ul>
			<li><button id="month-minus" type="button">-</button></li>
			<li id="Monat"> </li>
			<li id="Jahr"> </li>
			<li><button id="month-plus" type="button">+</button></li>
		</ul>
	</div>

 

[andreax]

So wie du den Time-Picker geschrieben hast wundere ich mich das die Übergabe an ein Inputfeld ein Problem sein sollte.

Schreib eine Funktion Z.B.

 function setInputTime(v){document.getElementById('input-feld').value = v;}

und bedenke dass Jahr 2000 war ein Schaltjahr weil alle 100 jahre keines aber alle 400 jahre doch wieder eines ist

 

[kkapsner]

Die Schaltjahre selber auszurechnen ist sowieso keine gute Idee. Da sollte man sich besser auf den Browser verlassen:

var d = new Date(2000, 2, 0, 12, 0, 0);
console.log(d);

Aber ich hab' mir mal deinen Code angesehen... du solltest lieber einen fertigen Datetimepicker verwenden. Du hast da ein paar Hunde im Code begraben. Generell arbeitest du in einem zu globalen Scope (z.B. deine globalen Variablen oder auch, dass du die Tabelle über document.getElementsByTagName() ansprichst).

PS: Noch was zu deiner Frage: du must auf den <td>s onclick-Eventlistener registrieren, die dann das entsprechende <input>-Feld updaten. Eine Referenz auf dieses Feld übergibst du am besten an activateTable.