Quermania - Kalender zum Eintrag von Datum und Uhrzeit in HTML-Formularen

Datetimepicker Javascript DOM
Hier die aktuellen
Bestseller auf
Amazon
und die
Lieferbedingungen
in der Coronakrise
Kalender zum Eintragen von Datum und Uhrzeit in HTML-Formularen:
Quellcode eines lizenzfrei (GNU General Public License) verwendbaren Kalenders zum Eintrag von Datum und Uhrzeit in HTML-Formularen, als Datetimepicker in Javascript DOM. Der Kalender wurde von Michael Loesler erstellt und von Quermania weiterentwickelt. Er darf unter Einhaltung der GNU-Lizenz als freie Software privat und kommerziell verwendet werden. Mit der Datei kalender.css ist die Veränderung des Aussehens und die Anpassung an die eigene Homepage möglich. Folgenden HTML-Code an der gewünschten Stelle der Webseite einfügen: <div id="calendar"></div>. Der Kalender ist hier zu sehen und wieder auszublenden.
/**********************************************************************
*       Calendar JavaScript [DOM] from v3.11 by Michael Loesler        *
************************************************************************
* Copyright (C) 2005-09 by Michael Loesler, http//derletztekick.com    *
* Modified 2013 by Falko Goethel, http://www.quermania.de			   *
*                                                                      *
* This program is free software; you can redistribute it and/or modify *
* it under the terms of the GNU General Public License as published by *
* the Free Software Foundation; either version 3 of the License, or    *
* (at your option) any later version.                                  *
*                                                                      *
* This program is distributed in the hope that it will be useful,      *
* but WITHOUT ANY WARRANTY; without even the implied warranty of       *
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the        *
* GNU General Public License for more details.                         *
*                                                                      *
* You should have received a copy of the GNU General Public License    *
* along with this program; if not, see <http://www.gnu.org/licenses/>  *
* or write to the                                                      *
* Free Software Foundation, Inc.,                                      *
* 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.            *
*                                                                      *
 **********************************************************************/
 
    function CalendarJS() {
        this.now = new Date();
        this.dayname = ["Mo","Di","Mi","Do","Fr","Sa","So"];
        this.monthname = ["Januar","Februar","M\u00e4rz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];    
        this.monthCell = document.createElement("th");
		this.dateCell = document.createElement("td");
		this.clockCell = document.createElement("td");
		this.tableHead = null;
		this.tableFoot = null;
        this.parEl = null;
        this.init = function( id, initDate ) {
            this.now = initDate?initDate:new Date();
			this.choosenDay = this.date = this.now.getDate();
			this.choosenMonth = this.month = this.mm = this.now.getMonth();
			this.choosenMonth = this.choosenMonth + 1;
			this.choosenYear = this.year = this.yy = this.now.getFullYear();
			this.choosenHour = 0;
			this.choosenMinute = 0;
            this.monthCell.appendChild(document.createTextNode( this.monthname[this.mm]+"\u00a0"+this.yy ));
			this.dateCell.appendChild(document.createTextNode( "01.06.2013" ));
			this.clockCell.appendChild(document.createTextNode( "00:00" ));
            this.tableHead = this.createTableHead();
            this.tableFoot = this.createTableFoot();
            this.parEl = document.getElementById( id );
            this.show();
            if (!initDate) this.checkDate();
        },
 
        this.checkDate = function() {
            var self = this;
            var today = new Date();
            if (this.date != today.getDate()) {
				this.tableHead = this.createTableHead();
				this.tableFoot = this.createTableFoot();
                this.date = today.getDate();
                if (this.mm == this.month && this.yy == this.year)
                    this.switchMonth("current");
                this.month = today.getMonth();
                if (this.mm == this.month && this.yy == this.year)
                    this.switchMonth("current");
                this.year  = today.getFullYear();
                if (this.mm == this.month && this.yy == this.year)
                    this.switchMonth("current");
            }
        },
 
        this.removeElements = function( Obj ) {
            while( Obj.childNodes.length > 0)
                Obj.removeChild(Obj.childNodes[Obj.childNodes.length-1]);
            return Obj;
        },
		
        this.show = function() {
            this.parEl = this.removeElements( this.parEl );
            this.monthCell.firstChild.replaceData(0, this.monthCell.firstChild.nodeValue.length, this.monthname[this.mm]+"\u00a0"+this.yy);
			var mmf = this.choosenMonth; 
			if(mmf<10){mmf='0'+mmf;}
			var ddf = this.choosenDay;
			if(ddf<10){ddf='0'+ddf;}
			this.dateCell.firstChild.replaceData (0, this.dateCell.firstChild.nodeValue.length, ddf+"."+mmf+"."+this.choosenYear);
			var hh = this.choosenHour;
			if(hh<10){hh='0'+hh;};
			var mm = this.choosenMinute;
			if(mm<10){mm='0'+mm;};
			this.clockCell.firstChild.replaceData (0, this.clockCell.firstChild.nodeValue.length, hh + ":" + mm);
			var table = document.createElement("table");
            table.appendChild( this.createTableBody() );
            table.appendChild( this.tableHead );
            table.appendChild( this.tableFoot );
            this.parEl.appendChild( table );
        },
		
		this.createTableFoot = function() {
			var tfoot = document.createElement("tfoot");
			var tr = document.createElement("tr");
			this.dateCell.Instanz = this;// für Funktion
			this.dateCell.rowSpan = 2;
			this.dateCell.colSpan = 3;
			this.dateCell.className = "choosen";
			this.dateCell.onclick = function() {
				if (this.Instanz.timeInput.style.display == "block" ){
					this.Instanz.switchForm ();
					}
				else {
					document.getElementById("calendar").style.display = "none";
					}
				}
			try { this.dateCell.style.cursor = "pointer"; } catch(e){ this.dateCell.style.cursor = "hand"; }
			tr.appendChild( this.dateCell );    
			this.clockCell.Instanz = this;
			this.clockCell.rowSpan = 2;
			this.clockCell.colSpan = 2;
			this.clockCell.className = "clock";
			try { this.clockCell.style.cursor = "pointer"; } catch(e){ this.dateCell.style.cursor = "hand"; }
			this.timeInput = document.createElement("input");
			this.timeInput.Instanz = this;
			this.timeInput.type = "text";
			this.timeInput.size = 4;
			this.timeInput.onblur = function(){ this.Instanz.inputFinished(); }
			this.clockCell.onclick = function() {
				this.Instanz.clockCell.firstChild.replaceData (0, this.Instanz.clockCell.firstChild.nodeValue.length, "");
				this.Instanz.timeInput.style.display = "block";
				this.Instanz.timeInput.name = "time";
				this.Instanz.timeInput.focus();
				this.Instanz.timeInput.onkeydown = function(event) {
				if (event.keyCode == 13 || event.keyCode == 39 || event.keyCode == 9) { this.Instanz.inputFinished(); }
				if (event.keyCode == 27) { this.Instanz.switchForm(); }
				}
			}
		this.clockCell.appendChild( this.timeInput );
		tr.appendChild( this.clockCell );   
		var td = this.getCell( "td", "\u02c4", "prev_hour" );
		td.Instanz = this;
		td.onclick = function() {
			if (this.Instanz.choosenHour < 1 ){
				this.Instanz.choosenHour = 23;
				}
			else {
				this.Instanz.choosenHour = this.Instanz.choosenHour - 1;
				}
			this.Instanz.switchForm ();
			}
		try { td.style.cursor = "pointer"; } catch(e){ td.style.cursor = "hand"; }
		tr.appendChild( td );		
		td = this.getCell( "td", "\u02c4", "prev_minute" );
		td.Instanz = this;
		td.onclick = function() {
			if (this.Instanz.choosenMinute > 0 ){
				this.Instanz.choosenMinute = this.Instanz.choosenMinute - 1;
				}
			else{
				this.Instanz.choosenMinute = 59;
				if (this.Instanz.choosenHour > 1){
					this.Instanz.choosenHour = this.Instanz.choosenHour - 1
					}
				else {this.Instanz.choosenHour = 23}
				}
			this.Instanz.switchForm ();
			}
		try { td.style.cursor = "pointer"; } catch(e){ td.style.cursor = "hand"; }
		tr.appendChild( td );
		tfoot.appendChild( tr );	
		tr = document.createElement('tr');
		td = this.getCell( "td", "\u02c5", "next_hour" );
		td.Instanz = this;
		td.onclick = function() {
			if (this.Instanz.choosenHour < 23){
				this.Instanz.choosenHour = this.Instanz.choosenHour + 1;
				}
			else {
				this.Instanz.choosenHour = 0;
				this.Instanz.nextChoosenDay();
				}
			this.Instanz.switchForm ();
			}
		try { td.style.cursor = "pointer"; } catch(e){ td.style.cursor = "hand"; }
		tr.appendChild( td );		
		td = this.getCell( "td", "\u02c5", "next_minute" );
		td.Instanz = this;
		td.onclick = function() {
			if (this.Instanz.choosenMinute < 59){
				this.Instanz.choosenMinute = this.Instanz.choosenMinute + 1;
				}
			else {
				this.Instanz.choosenMinute = 0;
				if (this.Instanz.choosenHour < 23){
					this.Instanz.choosenHour = this.Instanz.choosenHour + 1;
					} 
				else {
					this.Instanz.choosenHour = 0;
					this.Instanz.nextChoosenDay();
					}
				}
			this.Instanz.switchForm ();
			}
		try { td.style.cursor = "pointer"; } catch(e){ td.style.cursor = "hand"; }
		tr.appendChild( td );		
		tfoot.appendChild( tr );
		return tfoot;
		}
		
        this.createTableHead = function() {
            var thead = document.createElement("thead");
            var tr = document.createElement("tr");
			var th = this.getCell( "th", "\u00AB", "prev_month" );
			th.rowSpan = 2;
            th.Instanz = this;
            th.onclick = function() { this.Instanz.switchMonth("prev"); };
            try { th.style.cursor = "pointer"; } catch(e){ th.style.cursor = "hand"; }
			tr.appendChild( th );														
            this.monthCell.Instanz = this;
			this.monthCell.rowSpan = 2;
			this.monthCell.colSpan = 4;
            this.monthCell.onclick = function() { this.Instanz.switchMonth("current"); };
            try { this.monthCell.style.cursor = "pointer"; } catch(e){ this.monthCell.style.cursor = "hand"; }
            tr.appendChild( this.monthCell );    
			th = this.getCell( "th", "\u00BB", "next_month" );
			th.rowSpan = 2;
            th.Instanz = this;
            th.onclick = function() { this.Instanz.switchMonth("next"); };
            try { th.style.cursor = "pointer"; } catch(e){ th.style.cursor = "hand"; }
            tr.appendChild( th );
			th = this.getCell( "th", "\u02c4", "prev_year" );
            th.Instanz = this;
            th.onclick = function() { this.Instanz.switchMonth("prev_year"); };
            try { th.style.cursor = "pointer"; } catch(e){ th.style.cursor = "hand"; }
            tr.appendChild( th );
			thead.appendChild( tr );
			tr = document.createElement("tr");
            th = this.getCell( "th", "\u02c5", "next_year" )
            th.Instanz = this;
            th.onclick = function() { this.Instanz.switchMonth("next_year"); };
            try { th.style.cursor = "pointer"; } catch(e){ th.style.cursor = "hand"; }
            tr.appendChild( th );
           	thead.appendChild( tr );
			tr = document.createElement('tr');
            for (var i=0; i<this.dayname.length; i++)
                tr.appendChild( this.getCell("th", this.dayname[i], "weekday" ) );
            thead.appendChild( tr );
            return thead;
        	}

        this.createTableBody = function() {
            var dayspermonth = [31,28,31,30,31,30,31,31,30,31,30,31];
            var sevendaysaweek = 0;
            var begin = new Date(this.yy, this.mm, 1);
            var firstday = begin.getDay()-1;
            if (firstday < 0)
                firstday = 6;
            if ((this.yy%4==0) && ((this.yy%100!=0) || (this.yy%400==0)))
                dayspermonth[1] = 29;
            var tbody = document.createElement("tbody");
            var tr = document.createElement('tr');
            if (firstday == 0) {
                for (var i=0; i<this.dayname.length; i++) {
                    var prevMonth = (this.mm == 0)?11:this.mm-1;
                    tr.appendChild( this.getCell( "td", dayspermonth[prevMonth]-6+i, "last_month" ) );
                }
                tbody.appendChild( tr );
                tr = document.createElement('tr');
            	}
            for (var i=0; i<firstday; i++, sevendaysaweek++) {
                var prevMonth = (this.mm == 0)?11:this.mm-1;
                tr.appendChild( this.getCell( "td", dayspermonth[prevMonth]-firstday+i+1, "last_month" ) );
            	}
            for (var i=1; i<=dayspermonth[this.mm]; i++, sevendaysaweek++){
                if (this.dayname.length == sevendaysaweek){
                    tbody.appendChild( tr );
                    tr = document.createElement('tr');
                    sevendaysaweek = 0;
            		}
            	var td = null;
				cssToday = null;
				if (sevendaysaweek == 5 || sevendaysaweek == 6)
					cssToday = "weekend";
				if (i==this.date && this.mm==this.month && this.yy==this.year)
					cssToday = "today";
				if (i==this.choosenDay && this.mm==this.choosenMonth-1 && this.yy==this.choosenYear)
					cssToday = "choosen";
            	td = this.getCell( "td", i, cssToday ); 
				try { td.style.cursor = "pointer"; } catch(e){ td.style.cursor = "hand"; }
            	td.setDate = this.setDate;
            	td.dd = i;
            	td.mm = this.mm;
            	td.yy = this.yy;
				td.Instanz = this;
            	td.onclick = function() {
					this.Instanz.choosenDay = this.dd;
					this.Instanz.choosenMonth = this.mm + 1;
					this.Instanz.choosenYear = this.yy;
					this.Instanz.switchForm ();
                	}
            	tr.appendChild( td );
            	}
            var daysNextMonth = 1;
            for (var i=sevendaysaweek; i<this.dayname.length; i++) 
                tr.appendChild( this.getCell( "td", daysNextMonth++, "next_month"  ) );
            tbody.appendChild( tr );
            while (tbody.getElementsByTagName("tr").length<6) {
                tr = document.createElement('tr');
                for (var i=0; i<this.dayname.length; i++) 
                    tr.appendChild( this.getCell( "td", daysNextMonth++, "next_month"  ) );
                tbody.appendChild( tr );
            	}
            return tbody;
        }

        this.setDate = function(date) {
            //Get selected Date and Time
            //window.alert( date );
			
			//The following is only for Quermania.de; also an example for other pages
			
			document.formular.ende.readOnly = "false";
			document.formular.beginn.readOnly = "false";
			var sYear = date.getFullYear();
			var sMonth = date.getMonth()+1;
			var sDay = date.getDate();
			var sHour = date.getHours();
			var sMinute = date.getMinutes();
			var sSecond = '00';
			if(sMonth<10){ sMonth = '0'+sMonth;}
			if(sDay<10){ sDay = '0'+sDay;}
			if(sHour<10){ sHour = '0'+sHour;}
			if(sMinute<10){ sMinute = '0'+sMinute;}
			var outputDate = sYear + '-' + sMonth + '-' + sDay + ' ' + sHour + ':' + sMinute + ':' + sSecond ;		
			document.getElementById(datumfeld).readOnly = "false";
			document.getElementById(datumfeld).value = outputDate;
			var nowadays = new Date();
			if( date < nowadays){
				window.alert("Der Termin liegt in der Vergangenheit!"); 
				document.getElementById(datumfeld).value = "";
				this.choosenYear = nowadays.getFullYear();
				this.choosenMonth = nowadays.getMonth()+1;
				this.choosenDay = nowadays.getDate();
				this.choosenHour = 0;
				this.choosenMinute = 0;
				this.show();
				}
        }

	this.switchForm = function (){
		this.timeInput.value = "";
		this.timeInput.style.display = "none";
		var currentDate = new Date(this.choosenYear, this.choosenMonth - 1, this.choosenDay, this.choosenHour, this.choosenMinute, 00);
		this.setDate( currentDate );
		this.show();
		}

	this.inputFinished = function (){
		var a = this.timeInput.value;
		if (a.length < 5 || a.length > 5 ) {
			if (a.length < 1){
				this.switchForm();
				return;}
			alert("ungültige Uhrzeit!"); 
			return;
			}
		for (var i=0; i < 6; i++) {
			if (a.slice(i, i+1) == " "){
				alert("Uhrzeit darf kein Leerzeichen enthalten!");
				return;
				}
			}
		var hh = a.slice(0, 2);
		if(hh < 10) {hh = hh.slice(1, 2);}
		var mm = a.slice(3, 5);
		if(mm < 10) {mm = mm.slice(1, 2);}
		if(hh == 24) {hh = 0; this.nextChoosenDay();}
		if (hh > -1 && hh < 24 ) {
			hh = parseFloat(hh);
			this.choosenHour = hh;
			}
		else {
			alert("ungültige Uhrzeit!");
			return;
			}
		if (mm > -1 && mm < 60 ) {
			mm = parseFloat(mm);
			this.choosenMinute = mm;
			this.switchForm();
			}
		else {
			alert("ungültige Uhrzeit!");
			return;
			}
		}

	this.nextChoosenDay = function (){
		var dayspermonth = [31,28,31,30,31,30,31,31,30,31,30,31];
    	if ((this.choosenYear%4==0) && ((this.choosenYear%100!=0) || (this.choosenYear%400==0))){
    		dayspermonth[1] = 29;
			}    
		if(this.choosenDay < dayspermonth[this.choosenMonth - 1]){
			this.choosenDay = this.choosenDay + 1;
			}
		else {
			this.choosenDay = 1;
			this.yy = (this.mm == 11)?this.yy+1:this.yy;
        	this.mm = (this.mm == 11)?0:this.mm+1;
			if(this.choosenMonth < 11){
				this.choosenMonth = this.choosenMonth + 1;
				}
			else {
				this.choosenMonth = 1;
				this.choosenYear = this.choosenYear + 1;
				}
			}
		}


        this.getCell = function(tag, str, cssClass) {
            var El = document.createElement( tag );
            El.appendChild(document.createTextNode( str ));
            if (cssClass != null)
                El.className = cssClass;
            return El;
        },

        this.switchMonth = function( s ){
            switch (s) {
                case "prev": 
                    this.yy = (this.mm == 0)?this.yy-1:this.yy;
                    this.mm = (this.mm == 0)?11:this.mm-1;
                break;
 
                case "next":
                    this.yy = (this.mm == 11)?this.yy+1:this.yy;
                    this.mm = (this.mm == 11)?0:this.mm+1;
                break;
                case "prev_year":
                    this.yy = this.yy-1;
                break;
 
                case "next_year":
                    this.yy = this.yy+1;
                break;
                case "current":
                    this.yy = this.year;
                    this.mm = this.month;
                break;
            	}
			this.timeInput.value = "";
			this.timeInput.style.display = "none";
			var currentDate = new Date(this.choosenYear, this.choosenMonth - 1, this.choosenDay, this.choosenHour, this.choosenMinute, 00);
			this.show();
        }
    }
 
    var DOMContentLoaded = false;
    function addContentLoadListener (func) {
        if (document.addEventListener) {
            var DOMContentLoadFunction = function () {
                window.DOMContentLoaded = true;
                func();
            };
            document.addEventListener("DOMContentLoaded", DOMContentLoadFunction, false);
        }
        var oldfunc = (window.onload || new Function());
        window.onload = function () {
            if (!window.DOMContentLoaded) {
                oldfunc();
                func();
            }
        };
    }
 
    addContentLoadListener( function() {
            new CalendarJS().init("calendar");
    } );
Der integrierte Kalender (Datetimepicker) steht unter der GNU General Public License. Er wurde von Michael Loesler erstellt und von Quermania weiterentwickelt.