Immer wieder gestaltet man als Webworker Formulare für Websites, die Felder für Datumswahl beinhalten. Ich zeige in diesem Blogpost auf, wie man diese Aufgabe schnell und elegant mit Hilfe von jQuery UI löst.
Als erstes braucht man natürlich die jQuery-Javascript-Bibliothek in der Applikation (http://jquery.com/), für den produktiven Einsatz wird selbstverständlich die minimierte Version eingesetzt. Zusätzlich benötigt man den UI-Core, der bei Google Code unter http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.core.js erhältlich ist und zum guten Schluss das Datepicker-Plugin unter http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js.
Auf der HTML-Seite werden die JS-Files nun im Header eingebunden. Ausserdem bindet Ihr ein CSS ein, das Ihr Euch am besten direkt von http://blog.jqueryui.com/2010/02/jquery-ui-download-builderthemeroller-status/ holt:
<html>
<head>
<title>jquery ui form test</title>
<script type="text/javascript" src="/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="/styles/ui_sunny.css" type="text/css" media="all" />
</head>
Im Body wird das Formular gecodet. Das Vor-Belegen der beiden Formularfelder mit dem aktuellen Datum (und dem aktuellen Datum plus 1 Tag), sowie das Handling für Formular anzeigen/Formular bearbeiten habe ich hier mit Coldfusion gelöst, kann man ja jeweils auch in der Lieblings-Sprache seiner Wahl umsetzen:
<body>
<cfset currentDateFrom = createODBCDate(now()) />
<cfset currentDateFrom = DateFormat(currentDateFrom,"dd-mm-yyyy") />
<cfset currentDateTo = createODBCDate(now()) + 1 />
<cfset currentDateTo = DateFormat(currentDateTo,"dd-mm-yyyy") />
<cfif cgi.REQUEST_METHOD eq "POST">
<cfdump var="#form#">
<cfelse>
<script type="text/javascript">
$(function() {
$("#datepickerFrom").datepicker({ dateFormat: 'dd-mm-yy' });
$("#datepickerTo").datepicker({ dateFormat: 'dd-mm-yy' });
});
</script>
<form name="DateForm" method="post" action="#cgi.script_name#">
<p>
<label for="datepickerFrom">Start-Datum:</label>
<input class="inputDate" id="datepickerFrom" name="datepickerFrom" style="width:100px" value="<cfoutput>#currentDateFrom#</cfoutput>" />
</p>
<p>
<label for="datepickerTo">Ende-Datum:</label>
<input class="inputDate" id="datepickerTo" name="datepickerTo" style="width:100px" value="<cfoutput>#currentDateTo#</cfoutput>" />
</p>
<p><input type="submit" value="Auswertung starten" /></p>
</form>
</cfif>
</body>
</html>
Hier ist der Aufruf des Datepickers an die Formular-Elemente mit den ID’s „datepickerFrom“ und „datepickerTo“ gebunden, als zusätzlicher Paramter wird das Datum in einem bestimmten Format festgelegt. Ein schöne Übersicht aller möglichen Attribute, Events und Methoden ist unter http://jqueryui.com/demos/datepicker/ zu finden. Unter dieser Adresse gibt es auch eine Demo von allen möglichen schicken UI-Themes.
Als Ergebnis erhalten wir also nun ein Formular mit 2 Datumswahl-Feldern, nach dem Abschicken wir nur ein Dump des Formular-Objekts angezeigt. Das sollte als Grundgerüst für den weiteren Ausbau genügen – viel Spass damit.