Datepicker - guckt bitte auch hier für eine neuere Variante


zurück zum Datepicker

Guckt Euch bitte auch das Tutorial von “paby” an.


Ergänzend möchte ich hinzufügen, dass Ihr ein “Eingabefeld” mittels der NOF-Formular-Werkzeuge für diesen “Datepicker” einfügen müsst, damit Ihr dieses Feld überhaupt mit der e-Mail vom Formular gesendet wird.

Weiterhin möchte ich meinen Einbau hier erklären ...

Um das Skript auf Deutsch darzustellen, müsst Ihr diese Datei einbinden:

jquery-datepicker-de.js

... die ich noch ein wenig modifiziert habe, sodass Montag der erste Wochentag im Skript ist. Weiterhin habe ich eine eigene CSS-Datei (“datepicker.css”) für den Datepicker erstellt.

Beide Dateien habe ich in einen Ordner

datepicker

kopiert, den Ihr Euch hier, von meinem Server, downloaden könnt:

http://www.tommyherrmanndesign.com/nof/download/datepicker.zip

Bitte entpackt diese ZIP-Datei. Nach dem Entpacken findet Ihr meinen Ordner

datepicker (enthält Dateien: “datepicker.css” und “jquery-datepicker-de.js”)

den Ihr bitte in den Ordner

assets

der “Lokalen Publizierung” von NOF, sowie natürlich auch in den gleichen Ordner (“assets”) mittels
FTP-Programm auf Euren Server kopiert.

Die jQuery-Dateien für dieses Skript, sowie die Original CSS-Datei (Google stellt diese direkt zur Verfügung und wir verlinken dorthin) bindet Ihr auf der Seite, auf der Ihr das einbaut, in die Layout-HTML ein.

Ebenso bindet Ihr die beiden Dateien aus meinem Ordner “datepicker” an dieser Stelle ein. Da ich das hier auf meiner Startseite eingebunden habe hat meine “relative Pfadangabe” (./) nur einen Punkt, was bedeutet, bleibe im gleichen Verzeichnis in dem sich der Ordner “assets” befindet. Solltet Ihr das auf einen Unterseite, die im Ordner “html” liegt, einbauen, dann muss die “relative Pfadangabe” an dieser Stelle zwei Punkte (../) haben, was bedeutet, gehe ein Verzeichnis höher (in das Stammverzeichnis), wo sich der Ordner “assets” befindet.

> auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags”

den Code unten einfügen.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css"
 type="text/css" media="all" />

<script src="./assets/datepicker/jquery-datepicker-de.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="./assets/datepicker/datepicker.css">

Unten meine Datei “datepicker.css”. Um die Farben, Schriftgröße usw. zu verändern, müsst Ihr ein wenig ausprobieren. Ich habe die eine oder andere Stelle kommentiert.

Nun markiert das Eingabefeld für das Datum und klickt dann im Fenster “Eingabefeld-Eigenschaften” auf den Button “HTML” (siehe im Bild unten) und fügt den Code unten “vor dem Tag” (NOF 11 “vorher”) ein

<script type="text/javascript">
          $(function() {$("#datepicker").datepicker();});
</script>

... nun wollte ich jedoch mindestens 2 Datepicker haben, nämlich ein Start- und ein Enddatum. Dafür müsst Ihr lediglich folgendes tun:

Kopiert Euch Euer bereits fertiges Datum-Eingabefeld und gebt diesem einen neuen “Namen” und auch eine neue “Objekt-ID” (wie im Bild oben bereits gezeigt). Ich habe den Namen und die Objekt-ID jeweils

datepicker2

genannt. Dann kopiert Ihr wieder den Code (unten) in die HTML der “Eingabefeld-Eigenschaften” und verweist dort eben auf das neue Feld “datepicker2”.

<script type="text/javascript">
          $(function() {$("#datepicker2").datepicker();});
</script>

Es gibt noch jede Menge weitere Funktionen, die Ihr hier nachlesen könnt:

http://jqueryui.com/demos/datepicker/

Hier noch die Änderungen meiner Beispiele:

1) Wahl vom Datum erst ab morgen ( minDate: +1) und 1 Monat + 10 Tage nach heute möglich (maxDate)

<script>
    $(function() {
        $( "#datepicker3" ).datepicker({ minDate: +1, maxDate: "+1M +10D" });
    });
</script>

2) Mit Anzeige von Monat und Jahr

<script>
    $(function() {
        $( "#datepicker4" ).datepicker({ changeMonth: true, changeYear: true });
    });
</script>

3) Mit Anzeige von mehreren Monaten (hier 2)

<script>
    $(function() {
        $( "#datepicker5" ).datepicker({
            numberOfMonths: 2,
            showButtonPanel: false
        });
    });
</script>

4) Mit Anzeige der unteren Buttons (heute und fertig selbst in Datei “jquery-datepicker-de.js” geändert)

<script>
    $(function() {
        $( "#datepicker6" ).datepicker({
            showButtonPanel: true
        });
    });
</script>

nach oben

Viel Erfolg !