Datetimepicker Javascript DOM

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.
Responsives Webdesign

Datetimepicker Javascript DOM

Kalender zum Eintragen von Datum und Uhrzeit in HTML-Formularen:

Deutschlandweit Veranstaltung kostenlos eintragen:
