Ergebnis 1 bis 15 von 15

Thema: Mootools Datepicker direkt in FE-Template verwenden

  1. #1
    Contao-Nutzer
    Registriert seit
    23.06.2012.
    Beiträge
    72

    Standard Mootools Datepicker direkt in FE-Template verwenden

    Hallo,

    ich hab ein kleines Frontend-Template gebastet, dass ein simples HTML-Formular enthält. Nun möchte ich gerne den Datepicker aus den Mootools einbinden.

    Zunächst habe ich mich an diesem Code-Beispiel orientiert, dann auch bei diesen Beispielen geguckt, aber es hat nicht funktioniert.

    Hab dann in der Firebug-Javascript-Konsole gesehen, dass dort steht "ReferenceError: DatePicker is not defined" bzw. "ReferenceError: Picker is not defined", also offensichtlich stehen in meinem Template die Mootools-Klassen gar nicht zur Verfügung? Ich bin davon ausgegangen, dass das in einem Template der Fall ist.

    Ich hab von Javascript wenig Plan und finde irgendwie keinen Tipp, was ich machen muss. Weiss jemand vielleicht Rat?

    Tschüss,
    fluppi

  2. #2
    Contao-Fan Avatar von Zero
    Registriert seit
    25.05.2010.
    Ort
    Korntal
    Beiträge
    520
    User beschenken
    Wunschliste

    Standard

    Hi,

    wieso nimmst du nicht das calendarfield Modul von Andreas Schempp? http://contao.org/de/extension-list/...030009.de.html

    Und wegen deinem Fehler -> Der Datepicker ist eine Mootools Erweiterung. http://mootools.net/forge/p/mootools_datepicker
    Wenn du in deinem Layout Mootools Aktiviert hast, das brauchst du auf jeden Fall, muss du zusätzlich den Datepicker einbinden. Unter Contao2 /plugins/datepicker/datepicker.js und auch das CSS einbinden
    Unter Contao3 ab RC1 /assets/mootools/datepicker/2.1.1/ auch CSS Datei und die JS Datei einbinden.

    Das kannst du in dem zusätzliche Head Tags machen im Layout oder in der fe_page. Letzteres empfehle ich dir nicht.

    Allerdings empfehle ich dir die obengenannte Erweiterung und den Formular Generator. Wenn dir der nicht ausreicht, dann hol dir die Erweiterung "efg" http://contao.org/de/extension-list/...160009.de.html Der lässt dann so gut wie keine Wünsche offen
    Mein Blog -> brothers-project.de

  3. #3
    Contao-Nutzer
    Registriert seit
    23.06.2012.
    Beiträge
    72

    Standard

    Hallo

    du hast mit Sicherheit Recht, dass ich den Formular-Generator verwenden sollte, bzw. wenigstens dessen API. Ich hab das auch schon mal versucht, aber es hat irgendwie für meine Zwecke nicht so hingehauen. Muss dazu sagen, dass ich neu bin in der Contao-Welt und mich gerade versuche, einzuarbeiten, insbesondere in die Contao-Entwicklung.

    Was die Erstellung von Formularen zur Versendung von Emails oder Speichern von Daten in der Datenbank angeht, ist auch alles klar. Aber wie sieht es aus, wenn man Formulare in eigenen Erweiterungen verwenden will? Ich stelle mir das so vor, dass man dann den Formular-Generator im Backend nicht benutzt (oder doch?), aber die zugrundeliegende API, um selber Formulare zusammenzustricken.

    Das habe ich wie gesagt schon mal versucht, aber irgendwie passte das Verhalten dieser Formulare dann vorne und hinten nicht, ohne dass ich sagen konnte, woran es gelegen hätte. Insbesondere hatte ich Probleme damit, die Formulare mit Daten aus der Datenbank vorzubelegen, um bestehenden Datensätze zu ändern.

    Zur Zeit muss es bei mir halbwegs schnell gehen, weil ich meine Kollegen (und den Chef) überreden will, in Zukunft auf Contao zu setzen, und ich dazu eine bestimmte kleine Anwendung, die wir demnächst benötigen, in Contao implementieren will. Die Formulargeschichte ist hierbei nur ein kleiner Teil, darum hab ich meine Versuche mit den Widget-Klassen und so dann gelassen und das Formular in HTML ins Template geschrieben.

    Leider hab ich das aber auch nicht hinbekommen mit deinen Tipps. Ich verwende übrigens Contao 2.11.5.

    Was genau heisst denn, Mootools im Layout zu aktivieren? Ich finde unter den Skript-Einstellungen diverse Mootools-Templates, die ich auswählen kann (chosen, accordion, analytics, mediabox, slimbox). Keins davon scheint mir allgemein Mootools zu aktivieren - ich hab aber mal alle markiert.

    Wenn ich dann noch das Datepicker JS und CSS einbinde, sehe ich gar nichts mehr, nur noch eine leere, graue Seite. Muss ich nochmal analysieren.

    Tschüss,
    fluppi

    p.s. Ich werd mir merken ab jetzt immer die verwednete Contao-Version zu nennen, wenn ich was frage :-)

  4. #4
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    mootools-core und -more werden immer geladen. Mit den moo_templates werden nur Plugins aufgesetzt. Du könntest z.B. eins für den Datepicker schreiben. Ich habe den Datepicker schon oft manuell aufgesetzt, da ich mit den Erweiterungen schlecht an die Options kam und mir teilweise dies und das nicht gefiel. Warum das jetzt bei dir nicht läuft kann man von außen schlecht sagen, zumindestens einen Link auf die Seite mit deinen Versuchen bräuchte man da.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  5. #5
    Contao-Fan Avatar von Zero
    Registriert seit
    25.05.2010.
    Ort
    Korntal
    Beiträge
    520
    User beschenken
    Wunschliste

    Standard

    Ja, Andreas, du hast recht . Die werden bei Contao 2 immer geladen. Zuviel Contao 3

    Allerdings musst du die Datepicker.js trotzdem noch einbinden. Diese sind im Core/more nicht enthalten.
    Das muss im Head rein:
    HTML-Code:
    <link href="plugins/datepicker/dashboard.css" rel="stylesheet">
    <script src="plugins/datepicker/datepicker.js"></script>
    Überprüpfe zur Sicherheit mal die Pfade...

    Und nun brauchen wir mehr Info . Ich schließe mich Andreas an -> einen Link und eine Beschreibung was du überhaupt machen willst wären Vorteilhaft um gezielter zu helfen.
    Mein Blog -> brothers-project.de

  6. #6
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Zero Beitrag anzeigen
    ...Allerdings musst du die Datepicker.js trotzdem noch einbinden. Diese sind im Core/more nicht enthalten....
    Ja, deshalb sagte ich ein moo_datepicker schreiben, dort kann die Klasse dann eingebunden werden. Kann man sich auch bei moo_chosen abgucken.
    HTML-Code:
    <?php
    // moo_datepicker.xhtml
    // CSS files
    $GLOBALS['TL_CSS'][] = 'plugins/datepicker/dashboard.css';
    
    ?>
    
    <script type="text/javascript" src="plugins/datepicker/datepicker.js"></script>
    <script type="text/javascript">
    /* <![CDATA[ */
    window.addEvent('domready', function() {
      // Datepicker hier auf Formularfeld aufsetzen
    });
    /* ]]> */
    </script>
    CSS kann man natürlich auch anders einbinden, z.B. mit theme_plus.

    Und ja, Datepicker ist ein Thirdpartyplugin für MooTools, so wie chosen z.B.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  7. #7
    Contao-Fan Avatar von Zero
    Registriert seit
    25.05.2010.
    Ort
    Korntal
    Beiträge
    520
    User beschenken
    Wunschliste

    Standard

    Viele Wege führen nach Rom .
    Mein Blog -> brothers-project.de

  8. #8
    Contao-Nutzer
    Registriert seit
    23.06.2012.
    Beiträge
    72

    Standard

    Ich verwende nun die "calendarfield"-Erweiterung auf einem Contao 3.2.12 und versuche, in einer eigenen Extension in einem Frontend-Formular den Datepicker zu verwenden, was grundsätzlich auch funktioniert. Details sind mir aber recht unklar (habe mir viele Threads zu calendarfield durchgelesen, aber keinen dazu gefunden). Meine Formularwidgets generiere ich mit folgender Methode:
    PHP-Code:
        private function generateWidgets($arrFields)
        {
               
    $arrWidgets = array();
               foreach (
    $arrFields as $arrField)
               {
                   
    $strClass $GLOBALS['TL_FFL'][$arrField['inputType']];
                   if (!
    class_exists($strClass))
                   {
                       
    $this->log('Widget Class '.$strClass.' not found!',  __CLASS__.'::'.__FUNCTION__TL_ERROR);
                       continue;
                   }
                   
    $arrField['eval']['required'] = $arrField['eval']['mandatory'];
                   
    $objWidget = new $strClass($this->prepareForWidget($arrField$arrField['name'], $arrField['value']));
                   
    $arrWidgets[$arrField['name']] = $objWidget;
               }
               return 
    $arrWidgets;
           } 
    Der Code für mein CalendarField sieht derzeit so aus:
    PHP-Code:
    'ga_wishdate1' => array
    (
        
    'name'      => 'ga_wishdate1',
        
    'inputType' => 'calendar',
        
    'eval' => array('rgxp'=>'date','useFadeInOut'=>false,'draggable'=>true'togglesOnly'=>false),
    ), 
    Das Ergebnis im Frontend ist ein Text-Eingabefeld, und wenn man in das Eingabefeld klickt, öffnet sich der Datepicker und das ausgewählte Datum wird ins Textfeld geschrieben. Soweit wunderbar, an der Stelle auch ein Dankeschön für die Erweiterung

    Nun ist es aber so, dass man im Textfeld selber den Text nicht mehr verändern kann. Das hätte ich aber gerne und vermute mal, dass ich dazu entsprechende Optionen für den Datepicker einstellen soll. Das kann man ja scheinbar, indem man diese ins 'eval'-Feld schreibt. Aber irgendwie geht das nicht immer, so wird z.B. die Option 'draggable' übernommen und steht hinterher so auch im Javascript, aber die Optionen 'useFadeInOut' und 'togglesOnly' z.B. finde ich dort nicht bzw. sie sind mit denselben Werten belegt wie vorher auch (den Fade-Effekt würde ich z.B. auch gerne deaktivieren).

    Wenn ich das CalendarField im Formulargenerator verwende, gibt es die Option "Nur Datumsauswahl erlauben", die verhindert, dass man das Datum im Textfeld manuell ändern kann. Aber die Option wird nur angezeigt, wenn man auch ein Kalender-Icon anzeigt. Was ich notfalls auch machen könnte, jedoch kommt mir das alles etwas komisch vor und ich weiss nicht ob ich ganz auf dem falschen Dampfer bin.

    Weiss vielleicht jemand, was ich am obigen Code ändern muss, damit manuelle Änderung des Feldes möglich ist?

    Oder gibt es irgendwo Beispielcode für die Verwendung des calendarfield in eigene Erweiterungen? Habe im Erweiterungskatalog auch keine Erweiterung gefunden, die von calendarfield abhängig ist.

    Ein anderes Problem betrifft wohl den Datepicker selbst, es tritt auch im Contao-Backend auf, wo der Datepicker eingebunden ist: das Ändern der Zeit mit dem Mausrad funktioniert bei Firefox und Chrome nicht, im IE8 dagegen schon. Kennt das Problem jemand und weiss wie man das lösen kann?

    Grüsse,
    fluppi

  9. #9
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Dass die Variablen aus "eval" ins JS im FE übernommen werden, muss nicht unbedingt sein. Kann sein, dass nur diese drei Parameter dafür aufbereitet wurden.

    Der Parameter dafür wäre "blockKeydown" = false
    http://aryweb.nl/projects/mootools-d...er.attach.html

    Ansonsten musst du herausfinden, wie das JS zur Initialisierung mit den Options ins FE gebracht wird und dort deinen Hebel ansetzen.

    Das Scrollen der Zeit funktioniert im Original mit FF. Siehe hier https://github.com/arian/mootools-datepicker downloaden und ausprobieren.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  10. #10
    Contao-Fan Avatar von Stranger
    Registriert seit
    20.06.2009.
    Ort
    Blankenburg
    Beiträge
    746
    Partner-ID
    5635
    User beschenken
    Wunschliste

    Standard

    Danke an fluppi, das hat mir weitergeholfen. Ich hab jetzt allerdings die gleichen genannten Probleme, weil ich das Datumsfeld in meiner Erweiterung verwenden will.

    Hab zusätzlich im eval-Bereich noch das hinzugefügt:
    'placeholder' => 'tt.mm.jjjj',

    Zusammenfassung:
    • Kalender Icon wird nicht dargestellt
    • Datumsfeld ist nicht händisch änderbar/löschbar
    • CSS-Darstellung sieht unschön aus
    Du willst dich bei mir bedanken?
    Ich freue mich über Geschenke von meiner Amazon-Wunschliste.

    Contao-Anwender seit 2008
    Contao-Entwickler seit 2013, mehr als 50 Contao Erweiterungen programmiert

    Mein Unternehmen aus Blankenburg (Harz): Fast & Media

  11. #11
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Vielleicht mal direkt beim Entwickler nachsehen https://github.com/terminal42/contao...e/hotfix/1.5.1

    Es gibt da ein Hotfix. Issues (Tickets) können auch direkt dort erstellt werden, falls was nicht funktioniert.

    Wie man den Datepicker manuell im FE einbindet ist ja hier genau beschrieben https://github.com/arian/mootools-datepicker

    Datepicker class laden, Instanz aufsetzen (z.B. über CSS-Klasse "myDatepickerInput"), CSS einbinden. Die Variable zum manuellen Bearbeiten ist "blockKeydown", wie bereits oben erwähnt.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  12. #12
    Contao-Fan Avatar von Stranger
    Registriert seit
    20.06.2009.
    Ort
    Blankenburg
    Beiträge
    746
    Partner-ID
    5635
    User beschenken
    Wunschliste

    Standard

    Nee, das bringt ja nichts. Das hat mit dem Datepicker an sich nichts zu tun. Es muss an der Contao Erweiterung liegen.

    Der Datepicker wird ja auch von Contao selbst eingesetzt und da funktioniert alles. Oder seh ich das falsch?
    Du willst dich bei mir bedanken?
    Ich freue mich über Geschenke von meiner Amazon-Wunschliste.

    Contao-Anwender seit 2008
    Contao-Entwickler seit 2013, mehr als 50 Contao Erweiterungen programmiert

    Mein Unternehmen aus Blankenburg (Harz): Fast & Media

  13. #13
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    So einen Datepicker auf ein Inputfeld aufzusetzen ist im Prinzip sehr einfach. Contao macht das im BE und hat es nicht fürs FE vorgesehen.

    Die Erweiterung hilft einem dabei den Datepicker ins FE zu bringen wenn man nicht weiß, wie man eine JS-Datei ins FE bringt und das Datepicker-Objekt dort auf ein Element aufsetzt. Evtl. unterstützt die Extension auch noch die Mehrsprachigkeit und andere Sachen, die man sonst in sein moo_template bringen müsste. Wenn die Erweiterung ordnungsgemäß funktioniert, kann das sehr praktisch sein. In dem Template dieser Erweiterung müsste man dann seine eigenen Optionen aufsetzen können, wie z.B. blockKeydown.

    Wenn es dann im FE nicht funktioniert, kann es nur daran liegen, dass irgendwelche Ressourcen dort dann nicht erreichbar sind, z.B. das CSS, die Datepicker-JS-Dateien, oder das moo_template mit welchem man den Datepicker auf das Input aufsetzt. Oder dass die Reihenfolge der Einbindung nicht stimmt (zuerst das CSS, dann die Datepicker-Klasse, dann nach domready das Aufsetzen der Datepicker auf die Inputs). Das kann man aber alles mit einem Dev-Tool wie z.B. Firebug im FE herausfinden.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  14. #14
    Contao-Nutzer
    Registriert seit
    23.06.2012.
    Beiträge
    72

    Standard

    Was noch sehr nützlich ist: die Erweiterung calendarField stellt einen Hook zur Verfügung, mit dem man den Datepicker konfigurieren kann. Damit ist es offenbar möglich, jede beliebige Einstellung, die Datepicker zur Verfügung stellt, zu verwenden. Dem Hook wird der Array "$arrConfig" übergeben, in den man dann einfach weitere Werte eintragen kann.

    Ich hatte jetzt z.B. die Aufgabe, dass die nächsten 3 Tage im Datepicker nicht auswählbar sein sollten. Dazu habe ich in der Klasse "Contact" folgende Callback/Hook-Methode eingebaut:

    PHP-Code:
        public function customizeDatepicker($arrConfig)
        { 
            
    $date time() + 345600// 4 Tage in Sekunden (4*24*60*60)
            
    $arrConfig['minDate'] = 'new Date('date('Y',$date) .','. (date('m',$date)-1) .','date('d',$date) .')';
            return 
    $arrConfig;
        } 
    Einbinden kann man den Hook dann folgendermassen:

    PHP-Code:
    $GLOBALS['TL_HOOKS']['formCalendarField'][] = array('Contact','customizeDatepicker'); 

  15. #15
    Contao-Nutzer
    Registriert seit
    10.02.2012.
    Ort
    Basel
    Beiträge
    214
    Partner-ID
    8602

    Standard Aktuelle Version

    Die Erweiterung wird derzeit von hofff weiterentwickelt:

    https://github.com/hofff/contao-calendarfield

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •