im Januar 2013

Datepicker - Datum aus Kalender-Skript auswählen  - guckt auch hier für eine Alternative

An dieser Stelle möchte ich mich ganz herzlich bei Pittiplatsch aus unserem Forum für dieses neue Design bedanken - www.webdesign-agentur24.de

Hier könnt Ihr Euch die von mir auf deutsch modifizierte jQuery Datei downloaden:

Downloads insgesamt seit: 17.01.2013: 1915     

Bitte entpackt meine ZIP-Datei (jquery-datepicker.zip) und kopiert die Datei

jquery-ui.js

in ein Verzeichnis, das ich hier “datepicker” genannt und in meinem Stammverzeichnis der lokalen Publizierung sowie auf dem Server angelegt habe:

/assets/datepicker/

Dann kopiert Ihr folgende Verlinkungen in die HTML Eures Layouts:

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen.

... wobei sich der unterste Link auf die von mir modifizierte jQuery-Datei bezieht, die Ihr gerade herunter geladen habt. Achtet dabei auf die relative Pfadangabe, hier von der Startseite mit nur einem Punkt ./ von einer Unterseite, die sich normalerweise bei NOF im Verzeichnis “html” befindet, gehören dort zwei Punkte hin ../ (zwei Punkte = gehe ein Verzeichnis höher).

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="./assets/datepicker/jquery-ui.js"></script>

• Für die weitere Einbau-Anleitung guckt bitte bei meinem anderen Tutorial zum Datepicker

Ich habe hier (im Gegensatz zu dem anderen Datepicker) keine CSS-Datei verwendet.

Ich habe allerdings einige Style-Anweisungen, wie die Größe des Widgets, hier etwas kleiner (63%) als die Default-Werte, sowie einige Schriftgrößen und Farbangaben haben wollen und dazu diese CSS-Anweisung direkt in die Seiten-HTML eingefügt:

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn des Haupttextes” einfügen.

<style type="text/css">
   /* Größe des Widgets in Prozent */
   body {
      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
      font-size: 63%;
   }
   /* Header - die Anzeige der Monate wie Januar, Februar */
   .ui-datepicker .ui-datepicker-header {
      font-family : Verdana;
      font-size : 10px;
      padding-top : 5px;
      padding-bottom : 6px;
      /* Farbe der Schrift in schwarz */
      color : #000000
   }
   /* Dies ist die Anzeige der Wochentage wie Mo, Di */
   .ui-datepicker table {
      font-size: 10px;
      font-family : Verdana;
      /* Farbe der Schrift in dunkelgrau */
      color : #808080
   }
</style>

Hier noch mein Skript-Beispiel des Formulars

• Für die Einbauanleitung guckt bitte auch hier

So sieht das Skript meines Formulars mit den beiden Feldern “von:” und “bis:” aus, das automatisch die bereits gesetzten Daten erkennt und dadurch das “von” Datum nicht größer als das “bis” Datum sein kann und umgekehrt. Dazu habe ich dem Datumsfeld “von” die ID “von” und dem Datumsfeld “bis” die ID “bis” gegeben.

Hier mal die Ansicht der Eingabefeld-Eigenschaften des Feldes “von”

> Eingabefeld markieren > Fenster “Eingabefeld-Eigenschaften > Button “HTML” > “vor dem Tag” (ab NOF 11 “vorher”) das Skript einfügen

Eingabefeld “von” mit der ID von - hier 2 Monate anzeigen mit der Option “minDate”

<script>
   $(function() {
      $( "#von" ).datepicker({
         defaultDate: "+1w",
         changeMonth: true,
         numberOfMonths: 2,
         onClose: function( selectedDate ) {
            $( "#bis" ).datepicker( "option", "minDate", selectedDate );
         }
      });
   });
</script>

> Eingabefeld markieren > Fenster “Eingabefeld-Eigenschaften > Button “HTML” > “vor dem Tag” (ab NOF 11 “vorher”) das Skript einfügen

Eingabefeld “bis” mit der ID bis - hier 3 Monate anzeigen mit der Option “maxDate”

<script>
   $(function() {
      $( "#bis" ).datepicker({
         defaultDate: "+1w",
         changeMonth: true,
         numberOfMonths: 3,
         onClose: function( selectedDate ) {
            $( "#von" ).datepicker( "option", "maxDate", selectedDate );
         }
      });
   });
</script>

Guckt bitte auch hier für alle Optionen

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

nach oben

Viel Erfolg!