0 3993

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 hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich 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