0 4209

JQuery-Tutorial – Wie man mit JQuery einen Datumspicker erstellt.

Stellen Sie sich vor, Sie haben ein Formular. In diesem Formular soll man ein Datum eingeben können. Wäre es nicht toll, wenn der Besucher das Datum ganz einfach mit einem Datumspicker auswählen könnte?

Mit JQuery ist dies möglich. Ich zeige Ihnen, wie das funktioniert.

Zuerst müssen wir wieder, wie in dem ersten JQuery Tutorial beschrieben, unsere CSS und beide Javascript Dateien in unser Projekt einbinden:

Beispielcode HTML:

<head>
   <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet">
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  </style>
 </head>

Beachten Sie bitte wieder die aktuelle Version und Ihren Template-Ordner.

Nun benötigen wir ein Formular und darin ein Eingabefeld:

Beispielcode HTML:

<html>
 <head>
   <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet">
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  </style>
 </head>
 <body>
  <form>
    <input type="text" id="datum">
  </form>
 </body>
</html>

Wir haben jetzt unserem HTML Dokument ein Formular mit hinzugefügt. Diesem Formular haben wir ein Texteingabefeld mit der ID „Datum“ zugewiesen.

Diese ID werden wir nun per JQuery ansprechen. Wir fügen eine Javascript Funktion in den Head Bereich ein. (Sie können dies später in eine externe Javascript Datei auslagern.)

Beispielcode HTML:

<html>
 <head>
   <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet">
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#datum").datepicker();
    })
  </script>
  </style>
 </head>
 <body>
  <form>
    <input type="text" id="datum">
  </form>
 </body>
</html>

Wir haben nun eine Funktion erstellt, die auf ein Element mit der ID „Datum“ den datumspicker anwendet.

Testen Sie den Code. Sie werden staunen.

Klicken Sie in das Textfeld. Es öffnet sich der Datumspicker. Sobald Sie ein Datum auswählen, wird dies in das Textfeld geschrieben. Für Deutschland sollte das Format angepasst werden (wie man diese Änderung vornimmt, werde ich in einem der nächsten Tutorials schreiben), aber der erste große Schritt ist getan.

Herzlichen Glückwunsch. Sie sollten nun Ihr erstes JQuery Programm geschrieben haben.

No related posts.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.

Weiter