Tutorialwelt.de » JQuery http://www.tutorialwelt.de Tutorials aus der IT-Welt Sat, 22 May 2010 13:24:43 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 JQuery Tutorial – einen Datumspicker per JQuery http://www.tutorialwelt.de/451/jquery-tutorial-einen-datumspicker-per-jquery.htm?utm_source=rss&utm_medium=rss&utm_campaign=jquery-tutorial-einen-datumspicker-per-jquery http://www.tutorialwelt.de/451/jquery-tutorial-einen-datumspicker-per-jquery.htm#comments Sun, 22 Nov 2009 04:08:07 +0000 admin http://www.tutorialwelt.de/?p=451 Yet Another Related Posts Plugin.]]> 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.

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

]]> http://www.tutorialwelt.de/451/jquery-tutorial-einen-datumspicker-per-jquery.htm/feed 0