Bloggerschmidt


Hier schreibt Alexander Schmidt, Webentwickler und CSS Guru



JD15DE_banner_88x31.png

jQuery datepicker: Mit pickadate.js eine responsive Datumsauswahl ermöglichen

Wer eine Datums- und/oder Zeitauswahl sucht, die geräteunabhängig funktioniert und auf der JavaScript-Bibliothek jQuery fusst, wird mit dem kostenfreien Leichtgewicht pickadate.js bestens bedient. Das Addon kommt mit eigener Bibliothek, Themes und API und unter den 44 Übersetzungen ist auch die deutsche anzutreffen.

pickadate.js

Die unter dem Pseudonym amsul erstellte Erweiterung wird unter GitHub entwickelt. Neben dem date picker existiert auch ein time picker und um eigenen Funktionalitäten mit einzubauen, hilft die Dokumentation der API weiter.

Features

  • Support für jQuery ab 1.7

  • Touch- und Tastatur-freundlich

  • Browser-Suppport ab IE8+

  • Übersetzungen für 44 Sprachen (auch deutsch)

  • Folgt der BEM Klassennamensgebung

  • LESS basierte Stylesheets

  • Basiert auf dem Grunt Build System

Vorbereitung

Ist das aktuelle Release heruntergeladen und entpackt, brauchst Du lediglich eine Datei namens index.html zu erstellen, um eine Demo des Datepickers zu codieren. Das Basis-Template sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>pickadate.js demo</title>
	<link rel="stylesheet" href="css/default.css">
	<link rel="stylesheet" href="css/default.date.css">
</head>
<body>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="js/picker.js"></script>
	<script src="js/picker.date.js"></script>
	<script src="js/legacy.js"></script>
	<script src="js/de_DE.js"></script>
</body>
</html>

Nach dem HTML5-Standard kommen die nötigen CSS-Dateien in den head und alle JavaScript-Dateien vor das schließende body-Tag. Die CSS-Dateien gehören zum Standard-Theme und können nach belieben erweitert werden. Nach der jQuery-Datei werden vier pickadate-Dateien geladen: picker.js und picker.date.js für den datepicker, legacy.js für den Browser-Support ab IE8+ und die deutsche Übersetzung de_DE.js.

HTML inputs

Anhand einem Geburtstagsfeld soll der date picker kurz erklärt werden.

<input class="datepicker birthday" type="text" placeholder="Geburtstag" />

Die Klasse datepicker ist Pflicht, um das Plugin anzusprechen. Über die Klasse birthday bringen wir im nächsten Schritt den Picker zum Laufen.

jQuery function

Folgendes jQuery hört auf die Klasse birthday:

<script type="text/javascript">
	// Geburtstag
	$('.birthday').pickadate({
		selectMonths: true,
		selectYears: 100,
		max: true
	});
</script>

Um die Monate frei wählbar zu machen, setzen wir selectMonths auf true. Weiterhin sollen bis zu 100 Jahre auswählbar sein mit selectYears: 100. Ist max auf true gesetzt, kann ein Datum nur aus der Vergangenheit gewählt werden. Ansonsten würden die 100 Jahre auf 50 Jahre in der Vergangenheit und 50 Jahre in der Zukunft aufgeteilt.

Der komplette Code

Mit ein bißchen CSS sieht die index.html der Demo wie folgt aus

<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="pragma" content="no-cache">
	<title>pickadate.js demo</title>
	<link rel="stylesheet" href="css/default.css">
	<link rel="stylesheet" href="css/default.date.css">
	<style type="text/css">
		body {
			background-color: #333;
			padding-top: 60px;
			text-align: center
		}
		input {
			border: 1px solid #ccc;
			padding: 10px;
		}
		.picker__select--month,
		.picker__select--year {
			height: 3em;
		}
		.picker__button--today,
		.picker__button--clear,
		.picker__button--close {
			letter-spacing: -0.8px
		}
	</style>
</head>

<body>

	<input class="datepicker birthday" type="text" placeholder="Geburtstag" />

	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="js/picker.js"></script>
	<script src="js/picker.date.js"></script>
	<script src="js/legacy.js"></script>
	<script src="js/de_DE.js"></script>
	<script type="text/javascript">
		// Geburtstag
		$('.birthday').pickadate({
			selectMonths: true,
			selectYears: 100,
			max: true
		});
	</script>

</body>

</html>

Fazit

Die vielen Einstellungsmöglichkeiten von pickadate.js, sowie die Unterstützung für alle gängigen Browser (ab IE8+) und mobile Geräte, machen die jQuery-Erweiterung zu ersten Wahl was Datepicker angehen. Die API sucht seinesgleichen und die lebendige Entwicklung unter GitHub spricht dafür, dass man mit dem Einsatz dieses Plugins auf das richtige Pferd setzt.