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 :(

Javascript:

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';
    }
}

HTML

<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>

 

[bdt600]

Du weißt aber schon, dass du das Rad neu erfinden willst? Es gibt massenhaft freie und ausgereifte DateTimePicker im Netz

 

[Caan069]

Ja, das weiß ich schon ist halt ne Übung und ich bin noch relativ neu in Javascript

 

[Tronjer]

Crossposting: closed