Startseite > Allgemein > Datepicker / Kalender in BreezingForms

Datepicker / Kalender in BreezingForms

Heute musste ich in BreezingForms ein Datepicker einbauen. Zugegeben, ich verwende bei diesem Projekt noch die alte BreezingForms Version 1.6.0 aber ich gehe davon aus dass diese Lösung auch in der aktuellen Version funktioniert.

Als Grundlage habe ich diesen Forumseintrag gefunden. Der Unobtrusive Date-Picker gefällt mir sehr gut und ich kenne ihn schon aus der Verwendung mit CakePHP. Jedoch wird in dem Forumsbeitrag die Version 4 verwendet und ich wollte lieber die neuste Version 5 nutzen. Ausserdem gibt es eine schönere Möglichkeit CSS und JS Dateien mit Hilfe des Joomla Frameworks einzubinden. Hier also mein Vorgehen:

  1. die neuste Version von Unobtrusive Date-Picker runterladen (ziemlich weit unten auf der Seite)
  2. der Inhalt der ZIP Datei muss nach {mossite}/includes/js/ kopiert werden
  3. Im Formular muss im Formularteil „Vor Formular“ folgendes ergänzt werden:
    $document = JFactory::getDocument();
    // include the javascript functions for dates
    $document->addScript('{mossite}/includes/js/date-picker-v5/js/lang/en.js');
    $document->addScript('{mossite}/includes/js/date-picker-v5/js/datepicker.js');
    $document->addStyleSheet('{mossite}/includes/js/date-picker-v5/css/datepicker.css');
    
  4. Jetzt ein simples Text-Feld anlegen und abspeichern
  5. Jetzt benötigen wir die DOM-ID des Eingabefeldes. Diese lautet ff_elem{Script ID}. Die Script ID zu jedem Element findest du in der rechten Spalte in dem Bearbeitungsmodus des Formulars. In meinem Fall lautet die ID ff_elem2116
  6. Das Textfeld noch mal editieren und beim „Initialisierungsskript“ Typ „Spezial“ und die Bedingung „Formulareintritt“ aktivieren
  7. Den Rahmencode erzeugen lassen
  8. nach case „formentry“: kommt jetzt der Datepicker Code. z.B.
    datePickerController.createDatePicker({
    formElements:{"ff_elem2116":"Y-ds-m-ds-d"}
    });
    

    Hier muss jetzt die DOM-ID des Feldes eingetragen werden.
    Natürlich können auch die weiteren Möglichkeiten des Datepickers genutzt werden

  9. Fertig, der Datepicker sollte neben dem Formularfeld erscheinen
Kategorien:Allgemein Schlagwörter: , , ,
  1. Juni 12, 2010 um 17:36

    wow

    mit deiner Anleitung eine Sache von 3 Minuten.
    Der Datepicker sieht absolut gut aus!!

    Vielen Dank nochmals hat mir sehr geholfen!

  2. marco
    September 16, 2010 um 06:59

    danke für die super anleitung. geht einfach schnell!

    habe nur das problem, dass ich ein mehrseitiges formular habe und der datepicker auf jeder seite angezeigt wird. weisst du, was ich falsch mache?

    • September 16, 2010 um 07:33

      Hallo Marco,
      du machst nichts falsch. Das ist eine Eigenschaft von BreezingForms und dem Datepicker, aber es gibt eine sehr einfache Lösung.
      BreezingForms generiert alle Seiten gleichzeitig und versteckt sie später per CSS „visibility:hidden;“ beim Datepicker ist die visibility immer auf visible gestellt. Also eifach in der Datei: includes/js/date-picker-v5/css/datepicekr.css die Zeile 110 „visibility:visible;“ löschen. Diese Angabe muss innerhalb des CSS Abschnittes
      a.date-picker-control:link,
      a.date-picker-control:visited

      stehen

      • marco
        Oktober 1, 2010 um 12:13

        Hallo Individuali,
        hat ja super geklappt – Vielen Dank für Deine Hilfe!!!

  3. Chrissi
    September 24, 2010 um 12:45

    Hallo, das hört sich so gut an, doch wie funktioniert das?
    „…# der Inhalt der ZIP Datei muss nach {mossite}/includes/js/ kopiert werden
    # Im Formular muss im Formularteil „Vor Formular“ folgendes ergänzt werden…“
    Welcher Inhalt (das ist doch ein ganzes Paket) – wo liegt „{mossite}/includes/js/ „?
    In welchem Formular? „Im Formular muss im Formularteil „Vor Formular“ folgendes ergänzt werden: …“
    Wäre echt gut, das zu wissen. Hoffe, das alles gilt auch für Joomla? Danke schön!

    • September 24, 2010 um 12:53

      Hallo Chrissi,
      gemeint der Inhalt der ZIP Datei. D.h. die ZIP Datei muss entpackt werden z.B. mit 7zip ( http://www.7-zip.de ) und {mossite} steht für der Hauptordner von Joomla. Schau im Hauptordner deiner Joomla Installation, da müsstest du das Verzeichnis „includes“ mit derm Unterverzeichnis „js“ finden, da gehören die Dateien aus dem ZIP-Archiv rein.
      Mit dem Formular ist das Formular gemeint dass du mit BreezingForms angelegt hast. Die Anleitung gilt für Joomla im Zusammenspiel mit BreezingForms.

  4. keats
    Mai 19, 2011 um 18:28

    Hi… super anleitung…

    Leider gibt es in Joomla 1.6 das js Verzeichnis nicht mehr unter includes. Kannst du mir weiterhelfen wo ich das neu finde und was sich bei deiner anleitung dadurch geändert hat?

    Gruss und Danke

    • Juni 16, 2011 um 10:23

      was meinst du mit das Verzeichnis ist nicht da?
      Die Dateien liegen in dem Verzeichnis in das du es reinkpopierst und von dort musst du sie auch wieder verlinken,

  5. Horst
    Mai 20, 2011 um 08:51

    Hey,
    super verständliche Anleitung, allerdings funzt es bei mir nicht.

    Nutze Breezingforms 1.7.2 (vllt liegt hier bereits der Hund begraben ._.) mit Joomla 1.5.2 und zum testen auf dem milkyway template um Fehler eines eigenen Templates auszuschließen.
    Lasse das ganze über xampp auf meinem Rechner laufen.

    Habe über den EasyMode ein Formular erstellt, erst mal nur mit einem Textfeld um den datepicker zu testen.
    Daten in den korrekten Joomla-Ordner gepackt (includes/js/), dabei die alten Daten überschrieben bzw ersetzt.
    Dann über Formulareinstellung Formularteile den Code für „Vor Formular“ kopiert.
    Text-Feld erstellt und den Initalisierungsskript kopiert:

    function ff_41bedd4216a2b6937ddedf5e508a4b1c_init(element, condition)
    {
    switch (condition) {
    datePickerController.createDatePicker({
    formElements:{„ff_elem41bedd4216a2b6937ddedf5e508a4b1c“:“Y-ds-m-ds-d“}
    });

    default:;
    } // switch
    } // ff_41bedd4216a2b6937ddedf5e508a4b1c_init

    Demnach müsste ich eig alles richtig gemacht haben. Bei mir scheint die DOM-ID deutlich länger zu sein, als im Tut. Ist das korrekt? Hab sie aus dem Beginn des Codes einfach entnommen.

    Auf der Demosite erscheint nur das Textfeld, nichts zusätzlich -.-

    Wäre super wenn du mir helfen könntest🙂

    • Horst
      Mai 20, 2011 um 08:54

      Hab den falschen Initalisierungsskript kopiert, ohne Formular eintritt, sry:

      function ff_41bedd4216a2b6937ddedf5e508a4b1c_init(element, condition)
      {
      switch (condition) {
      case ‚formentry‘:
      datePickerController.createDatePicker({
      formElements:{„ff_elem41bedd4216a2b6937ddedf5e508a4b1c“:“Y-ds-m-ds-d“}
      });

      break;
      default:;
      } // switch
      } // ff_41bedd4216a2b6937ddedf5e508a4b1c_init

      //

  6. Guru0815
    Juni 15, 2011 um 18:15

    Hallo individuali,

    ich hänge nun seit Stunden an dem Kalender und bekomme es nicht hin😦

    So bin ich vorgegangen:

    1. Dateien von Unobtrusive Date-Picker heruntergeladen und die entpackte Datei nach {mossite}/includes/js/ per FTP hochgeladen.

    2. Habe unter Komponenten–>BreezingForms–>ManageForms ein neues Formular erstellt:
    TITEL=EasyForm_1896716625
    NAME=EasyForm_1896716625
    SEITEN=1
    BREITE=400px
    HÖHE=500px
    D=4
    es ist veröffentlicht.

    3. Dann habe ich wie beschrieben ein simples Text-Feld angelegt und abgespeichert.
    habe dann auf das Eingabefeld gklict und unter ELEMENT–>INITIALISIERUNGSSCRIPT folgende Einstellungen vorgenommen: TYP=Custom und Haken bei Formulareintritt dann Code Framework erzeugen geklickt und nach case „formentry“: dieses–>
    datePickerController.createDatePicker({
    formElements:{„ff_elem4″:“Y-ds-m-ds-d“}
    });
    eingetragen. UPDATE-Button geklickt und gespeichert.

    F R A G E ist es die richtige ID ???

    4. Habe auf einer schon bestehenden Kontaktseite per {loadposition syndicate} das Breezingforms-Modul in den Content eingebunden – es ist sichtbar.

    5. Nun komme ich nicht weiter:
    „Im Formular muss im Formularteil „Vor Formular“ folgendes ergänzt werden: …“
    $document = JFactory::getDocument();
    // include the javascript functions for dates
    $document->addScript(‚{mossite}/includes/js/date-picker-v5/js/lang/en.js‘);
    $document->addScript(‚{mossite}/includes/js/date-picker-v5/js/datepicker.js‘);
    $document->addStyleSheet(‚{mossite}/includes/js/date-picker-v5/css/datepicker.css‘);

    WO IM FOMULAR ???

    Ich check es einfach nicht wohin damit? Per FTP irgendwohin ??? Oder in Manage Scripts ???

    Hoffe man kann mir noch helfen, wäre echt cool – D A N K E !!!

    -Guru0815-

    • Juni 16, 2011 um 10:25

      Wenn du die englische Übersetzung verwendest klick auf: „Edit Form“ und dann auf „Form Pieces“.
      Wähle bei „Before Form“ den Type „Custom“ und trage die include Zeilen in das neue Feld ein.

  7. Guru0815
    Juni 19, 2011 um 06:35

    Hallo individuali,

    also wenn ich bei mir auf Englisch stelle und unter Components auf Breezingforms klicke, habe ich diese Leiste:
    Manage Records
    Manage Backend Menus
    Manage Forms
    Manage Scripts
    Manage Pieces
    Integrator
    Configuration
    bei Manage Pieces habe ich diese Auflistung: Add custom CSS File

    Habe Breezigforms 1.7.2 installiert, wahrscheinlich ist es super Simpel nur ich checks nicht…

    -Guru0815-

  8. August 10, 2011 um 22:43

    Hallo Guru0815,

    wenn du dein Formular im Classic Mode aufgerufen hast, kannst du oben auf der rechten Seite die Form bearbeiten (direkt vor dem Button „neu“ oder „new“, mit dem du das neue Feld angelegt hast).
    Darin hast du jetzt mehrere Reiter: Einstellungen / Admin Emails/ Rückantwort eMails/ Mail Chimp/ Skripte/ Formularteile/Übermittlungsteile.
    Hier gehst du jetzt auf Formularteile -> Vor Formular.
    Aktivierst dort den Radiobutton Spezial und kopierst das Script rein:

    $document = JFactory::getDocument();
    // include the javascript functions for dates
    $document->addScript(‚{mossite}/includes/date-picker-v5/lang/en.js‘);
    $document->addScript(‚{mossite}/includes/date-picker-v5/datepicker.js‘);
    $document->addStyleSheet(‚{mossite}/includes/date-picker-v5/css/datepicker.css‘);

    (Bei mir liegen der Date-Picker direkt im Verzeichnis „includes“. Daher habe ich den Eintrag /js bei mir gelöscht).

    AF IMAGE

  9. Johannes
    November 19, 2011 um 02:34

    Hallo,

    ich hab ein Problem. Die Einbindung des ganzen hat eigentlich geklappt und wenn ich das Formular bearbeite, dann kann ich von der Ebene den Datepicker auch sehen.
    Wenn ich jedoch auf der Homepage mir das Formular angucke, ist dies nicht möglich. Es geht erst wieder, wenn ich das Skript des Textfeldes auf „Kein“ stelle. Wird daher wohl vermutlich mit dem eingegebenen Code zu tun haben, hier ist er:

    function ff_Eingabe_Liefertermin_init(element, condition)
    {
    switch (condition) {
    case ‚formentry‘:
    datePickerController.createDatePicker({
    formElements:{„ff_elem226″:“Y-ds-m-ds-d“}
    });
    break;
    default:;
    } // switch
    } // ff_Eingabe_Liefertermin_init

    Vielleicht kann mir jemand helfen.🙂

    • November 25, 2011 um 14:35

      schau bitte mal ob der Browser javascript Fehler meldet z.B. in der Fehlerkonsolle von Web-Developer mit Firefox.

  10. Flo
    Februar 7, 2012 um 11:08

    hab das gleiche Problem! Zunächst mal danke für die tolle Anleitung. Bei mir ist es auch so, dass im Bearbeitungsmodus des Formulars der Date-Picker funzt, auf der eigentlichen Website jedoch nicht. Gibt´s schon eine Idee oder Lösung?

  11. Oli K
    Juli 16, 2012 um 19:23

    Wow. Mir raucht langsam die Birne. Bin eigentlich genau nach Anleitung vorgegangen aber bei mir kommt nichts und die Javascript Konsole des Firebugs meldet einen Syntax Error bei
    $document->addScript(‚{mossite}/includes/date-picker-v5/js/lang/de.js‘);

    und zwar genau bei dem ‚>‘ Zeichen. Woran kann das denn liegen?

  12. Oli K
    Juli 16, 2012 um 19:38

    Hat sich doch schon erledigt. Hab das Script bei Formular bearbeiten nicht bei Vorm Formular sonder beim Initialisieren eingetragen. Manchmal ist die Lösung so einfach und nah…

  13. Uli
    September 10, 2012 um 15:03

    Hallo,
    danke für die Anleitung, hat super geklappt!
    Wo kann ich die Hintergrundfarbe, Schriftfarbe etc. ändern?
    Grüße

  14. Uli
    November 7, 2012 um 12:33

    Hallo nochmal,
    wo kann ich den Tooltipp ändern? Für ein englisches Formular sollte dieser auch in englischer Sprache sein.
    Grüße

  1. No trackbacks yet.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: