WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 29.11.2017 22:27:31

bastie
Member

Datepicker

Hat von Euch schon mal wer versucht so einen wunderhübschen Datepicker einzubauen? Und wenn, dann wie?


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen ausschließlich unter der CC0-Lizenz.

Offline

#2 30.11.2017 08:01:29

florian
Administrator

Re: Datepicker

Im miniform-Creator ist es nicht vorgesehen, muss also von Hand eincodiert werden. MiniForm ist allerdings sehr restriktiv, was JS-Code im Formular-Template angeht, sprich JavaScript bleibt zwar im Miniform-Template erhalten, wird im Frontend aber verstümmelt / nicht funktionierend ausgegeben.

Abhilfe: Auf der Seite mit miniform einen Code2-Abschnitt anlegen und in diesem den benötigten Code eintragen - ohne öffnenden/schließenden Script-Tag.
attachment.php?item=1156&download=1

D.h. wenn es im Miniform-Template ein Feld Datum gibt, für das der  Datepicker angezeigt werden soll...

<div class="full">
				<label for="datum"><span>Datum <span>*</span></span> 
					<input required="required" class="{DATUM_ERROR}" type="text" id="datum" name="mf_r_datum" value="{DATUM}" />
				</label>
			</div>

...muss es davor einen Code2-Abschnitt mit folgendem Inhalt geben:

  $( function() {
    $( "#datum" ).datepicker();
  } );

Ergebnis:
attachment.php?item=1157&download=1

Über Parameter kann der Datepicker dann noch angepasst/lokalisiert werden, siehe https://jqueryui.com/datepicker/#date-formats

Offline

#3 30.11.2017 08:54:53

bastie
Member

Re: Datepicker

Wow, danke! Probier ich aus.


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen ausschließlich unter der CC0-Lizenz.

Offline

#4 30.11.2017 14:20:20

dev4me
Developer

Re: Datepicker

Have a look here: https://miniform.dev4me.com/demo/datepicker-demo/
> including a functioning demo template for download

Offline

#5 30.11.2017 15:40:32

bastie
Member

Re: Datepicker

dev4me wrote:

Have a look here: https://miniform.dev4me.com/demo/datepicker-demo/
> including a functioning demo template for download

Thank you very much!


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen ausschließlich unter der CC0-Lizenz.

Offline

#6 06.08.2019 14:12:12

bastie
Member

Re: Datepicker

florian wrote:

Im miniform-Creator ist es nicht vorgesehen, muss also von Hand eincodiert werden. MiniForm ist allerdings sehr restriktiv, was JS-Code im Formular-Template angeht, sprich JavaScript bleibt zwar im Miniform-Template erhalten, wird im Frontend aber verstümmelt / nicht funktionierend ausgegeben.

Abhilfe: Auf der Seite mit miniform einen Code2-Abschnitt anlegen und in diesem den benötigten Code eintragen - ohne öffnenden/schließenden Script-Tag.
https://forum.wbce.org/attachment.php?i … download=1

D.h. wenn es im Miniform-Template ein Feld Datum gibt, für das der  Datepicker angezeigt werden soll...

<div class="full">
				<label for="datum"><span>Datum <span>*</span></span> 
					<input required="required" class="{DATUM_ERROR}" type="text" id="datum" name="mf_r_datum" value="{DATUM}" />
				</label>
			</div>

...muss es davor einen Code2-Abschnitt mit folgendem Inhalt geben:

  $( function() {
    $( "#datum" ).datepicker();
  } );

Ergebnis:
https://forum.wbce.org/attachment.php?i … download=1

Über Parameter kann der Datepicker dann noch angepasst/lokalisiert werden, siehe https://jqueryui.com/datepicker/#date-formats

Die Lösung habe ich ausprobiert, klappt prima. Nur mit der Umstellung auf deutsch komme ich nicht klar. Wenn ich es richtig verstanden habe, muß in den Code2-Abschnitt noch folgendes mit hinein:

  $( function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "de" ] );
    $( "#locale" ).on( "change", function() {
      $( "#datepicker" ).datepicker( "option",
        $.datepicker.regional[ $( this ).val() ] );
    });
  } );

Im Jqueryui-Code -Beispiel ist im Head dann noch das entsprechende Sprach-Script eingebunden. Wo muß ich das dann wie einbinden, damit der Datepicker auf deutsch erscheint?  Ich habe mit Code2 bis jetzt noch nie gearbeitet.


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen ausschließlich unter der CC0-Lizenz.

Offline

#7 06.08.2019 14:43:27

florian
Administrator

Re: Datepicker

Das ist einfacher:

Du kannst das, wenn Du eine aktuelle miniform-Version benutzt, auch direkt im Formular-Template ergänzen, das filtert seit 0.14 den Code nicht mehr raus. und brauchst es nicht mehr in einem Code2-Abschnitt auszulagern. Letztlich bleibt es sich aber gleich.
D.h. wenn Du ein Feld namens Datum hast und Du da den Datepicker für haben willst, ändere entweder die Code2-Section auf das nachfolgende Codebeispiel oder entferne diesen Code2-Abschnitt und füge ganz am Ende des Formulartemplates ein:

<script src="/include/jquery/i18n/jquery.ui.datepicker-de.js"></script>
<script>
 $( function() {
    $( "#datum" ).datepicker($.datepicker.regional[ "de" ] );
  } );
</script>

Wenn Deine Website nicht im Root liegt (example.com/wbce/ statt example.com), musst Du die Zeile

<script src="/include/jquery/i18n/jquery.ui.datepicker-de.js"></script>

entsprechend anpassen, also vom Prinzip her (nicht 1:1 übernehmen) so:

<script src="https://www.example.com/wbce/include/jquery/i18n/jquery.ui.datepicker-de.js"></script>

Die Doku bzw. Codebeispiele auf jqueryui.com sind zudem unnötig kompliziert, da da auch der Code für den im konkreten Falle ja gar nicht benötigten Format-Switcher (fr, de, tralala) drin steht.

Offline

#8 06.08.2019 15:22:03

bastie
Member

Re: Datepicker

Perfekt, danke!  thumb_up


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen ausschließlich unter der CC0-Lizenz.

Offline

Liked by:

florian

Board footer

Powered by FluxBB

up