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

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 ;)

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 :-)

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.

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... :D

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.

Zitat:

---

Zitat von Zero

...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.

Viele Wege führen nach Rom :D.

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

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.

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

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.

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?

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.

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'); 


---

Die Erweiterung wird derzeit von hofff weiterentwickelt:

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