HTML Input Type „date“ und „datetime-local“ korrekt befüllen

Für die mit HTML5 neu hinzugekommenen Eingabe-Typen für „Datum“ type="date" und „Datum und Uhrzeit“ type="datetime-local" gibt es ein festgelegtes Format. So wird, auch für deutsche Datumsangaben, ein Datum immer im Format YYYY-MM-DD angegeben. Wie das Datum dem Betrachter der Website angezeigt wird, entscheidet der Browser. Googles Chrome z.B. anhand der eingestellten Systemsprache.

<input type="date" value="2015-01-21">

Nun gibt es die Möglichkeit, Datum und Uhrzeit in einem type="datetime-local" Eingabefeld zu kombinieren. Das Format für Eingabefelder vom Typ date wird entsprechend erweitert: YYYY-MM-DDThh:mm:ss.ms

<input type="datetime-local" value="2015-01-21T13:05:23.510">

T dient als Trenner zwischen Datum und Uhrzeit.

Aktuelles Datum und Uhrzeit mit PHP setzen

<input type="date" value="<?php echo date('Y-m-d'); ?>">
<input type="datetime-local" value="<?php echo date('Y-m-d\TH:i:s'); ?>">

Tab-Weite mit CSS korrigieren

Für Code-Darstellungen auf Websites ist die voreingestellte Tabulator-Weite viel zu breit, schon bei kurzen Beispielen wirkt der angezeigte Code unübersichtlich:

<div>
				<div>…</div>
				…
</div>

Zum manipulieren der Tabulator-Weite gibt es mit CSS3 nun die Eigenschaft tab-size:

pre {
	-webkit-tab-size: 2;
		 -moz-tab-size: 2;
			 -o-tab-size: 2;
					tab-size: 2;
}
<div>
	<div>…</div>
	…
</div>

Wie an den Vendor-Prefixes gut zu erkennen ist, hat diese Eigenschaft leider noch nicht in allen Browsern Einzug erhalten. Abhilfe können hier JavaScript-Polyfills (1, 2) schaffen.


Mit CSS durch HTML-Elemente hindurch klicken

In seltenen oder auch ekeligen Fällen kommt es vor, dass man z.B. durch einen <div>-Container hindurch auf ein Element hinter diesem klicken möchte. Zumeist tritt dieser Fall auf, wenn ein Teil des Inhalts durch ein halbtransparentes Hintergrundbild überlagert wird. Abhilfe schafft die CSS-Eigenschaft pointer-events. (mehr …)


Hallo! Wieso & Warum?

Hallo! Dieses Blog hat den Zweck (persönliche) Gedankenstütze, Referenz und Ideenpool für Code-Schnipsel, die immer wieder verwendet oder nachgelesen werden wollen, zu sein. Der Fokus liegt hier auf Script- und Auszeichnungssprachen im Bereich der Webentwicklung.

Lieblingsthemen sind hier unter anderem CSS, jQuery, WordPress(-Theming) und Bootstrap. Abhängig von Zeit und Lust wird sich der Themen-Umfang des Blogs über die Zeit voraussichtlich noch weiterentwickeln und erweitern. Die Ausführung und Qualität der Inhalte hängt übrigens ebenfalls direkt mit diesen Faktoren zusammen.

Hat man täglich mit besagten Themen zutun, sei es Hobby oder Beruf, häuft sich über die Zeit einiges an. Ich habe mich zu Folgendem entschlossen: Weg von wirren Notizen in diversen zwischengespeicherten *.txt-Dokumenten, in der Versenkung verschwundenen Bookmarks und unsortierten Wunderlist-Einträgen, hin zu Informations-Sharing und geordnetem Nachschlagen.

Mal schauen ob das was wird…