WBCE CMS – Way Better Content Editing.
Du bist nicht angemeldet.
Seiten: 1
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 unter der MIT-Lizenz.
Offline
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.
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:
Über Parameter kann der Datepicker dann noch angepasst/lokalisiert werden, siehe https://jqueryui.com/datepicker/#date-formats
Code allein macht nicht glücklich. Jetzt spenden!
Offline
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 unter der MIT-Lizenz.
Offline
Have a look here: https://miniform.dev4me.com/demo/datepicker-demo/
> including a functioning demo template for download
Offline
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 unter der MIT-Lizenz.
Offline
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=1D.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 unter der MIT-Lizenz.
Offline
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.
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Perfekt, danke!
Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen unter der MIT-Lizenz.
Offline
florian
Hallo zusammen,
Habe ein Buchungsformular mit Anreise und Abreise.
Bei Anreise kommt der Datepicker bei Abreise nicht.
Habe folgenden Code eingegeben
<div class="half">
<label for="anreise"><span>Anreise <span>*</span></span>
<input required="required" class="{DATUM_ERROR}" type="text" id="datum" name="mf_r_datum" value="{DATUM}" />
</label>
</div>
<div class="half">
<label for="abreise"><span>Abreise <span>*</span></span>
<input required="required" class="{DATUM_ERROR}" type="text" id="datum" name="mf_r_datum" value="{DATUM}" />
</label>
</div>
und am schluss vom Formular
<script>
$( function() {
$( "#datum" ).datepicker($.datepicker.regional[ "de" ] );
} );
</script>
Was mache ich falsch
Offline
IDs dürfen nur 1x verwendet werden. Und die Felder müsesn auch für Miniform selbst unterschiedliche Bezeichnungen haben.
Nicht getestet, aber so sollte es gehen:
<div class="half">
<label for="datum_anreise"><span>Anreise <span>*</span></span>
<input required="required" class="{DATUM_ANREISE_ERROR}" type="text" id="datum_anreise" name="mf_r_datum_anreise" value="{DATUM_ANREISE}" />
</label>
</div>
<div class="half">
<label for="datum_abreise"><span>Abreise <span>*</span></span>
<input required="required" class="{DATUM_ABREISE_ERROR}" type="text" id="datum_abreise" name="mf_r_datum_abreise" value="{DATUM_ABREISE}" />
</label>
</div>
<script>
$( function() {
$( "#datum_anreise" ).datepicker($.datepicker.regional[ "de" ] );
$( "#datum_abreise" ).datepicker($.datepicker.regional[ "de" ] );
} );
</script>
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Perfekt, Danke
Offline
Hallo, ich hätte gerne in ein Anfrage Formular statt eines normalen Eingabefensters einen Datepicker integriert. Leider scheine ich an meine Grenzen gestoßen zu sein und weiß nun nicht warum das Formular nicht mit dem Datepicker funktioniert obwohl ich die Ausführungen (wie ich denke) alle beachtet habe.
Hier mal mein Formular:
[== PHP ==]
<div class="miniform">
<div class="{MESSAGE_CLASS}">{STATUSMESSAGE}</div>
<div class="{FORM_CLASS}">
<h2>Anfrage/Buchung</h2>
<small>Felder mit <span><span>*</span></span> müssen ausgefüllt werden!</small>
<br/>
<form name="form_{SECTION_ID}" id="form_{SECTION_ID}" method="post" action="{URL}">
<input name="miniform" type="hidden" value="{SECTION_ID}"/>
<input name="header" type="hidden" value="Anfrage-Buchung"/>
<input name="mf_timestamp" type="hidden" value="{DATE} {TIME}"/>
<div class="full">
<label for="bitte_wählen!"><span>Bitte wählen! <span>*</span></span>
<div class="grouping {BITTE_WÄHLEN!_ERROR}">
<input required="required" type="radio" id="i-bitte_wählen!1" {BITTE_WÄHLEN!_ANFRAGE} name="mf_r_bitte_wählen!" value="Anfrage" /><label for="i-bitte_wählen!1">Anfrage</label>
<input required="required" type="radio" id="i-bitte_wählen!2" {BITTE_WÄHLEN!_BUCHUNG} name="mf_r_bitte_wählen!" value="Buchung" /><label for="i-bitte_wählen!2">Buchung</label>
</div>
</label>
</div>
<div class="half">
<label for="vorname"><span>Vorname <span>*</span></span>
<input required="required" class="{VORNAME_ERROR}" type="text" id="vorname" name="mf_r_vorname" value="{VORNAME}" />
</label>
</div>
<div class="half">
<label for="name"><span>Name <span>*</span></span>
<input required="required" class="{NAME_ERROR}" type="text" id="name" name="mf_r_name" value="{NAME}" />
</label>
</div>
<div class="full">
<label for="adresse"><span>Adresse <span>*</span></span>
<input required="required" class="{ADRESSE_ERROR}" type="text" id="adresse" name="mf_r_adresse" value="{ADRESSE}" />
</label>
</div>
<div class="onethird">
<label for="plz"><span>PLZ <span>*</span></span>
<input required="required" class="{CITY_ERROR}" type="text" id="plz" name="mf_r_plz" value="{PLZ}" />
</label>
</div>
<div class="twothird">
<label for="wohnort"><span>Wohnort</span>
<input class="{WOHNORT_ERROR}" type="text" type="text" id="city" name="mf_r_city" value="{CITY}" />
</label>
</div>
<div class="full">
<label for="e-mail_adresse"><span>E-Mail Adresse <span>*</span></span>
<input required="required" class="{E-MAIL_ADRESSE_ERROR}" type="text" id="e-mail_adresse" name="mf_r_e-mail_adresse" value="{E-MAIL_ADRESSE}" />
</label>
</div>
<div class="full">
<label for="stellplatz_für:"><span>Stellplatz für: <span>*</span></span>
<select required="required" class="{STELLPLATZ_FÜR:_ERROR}" id="stellplatz_für:" name="mf_r_stellplatz_für:">
<option {STELLPLATZ_FÜR:_SELECTED_ZELT/AUTO/MOTORRAD/FAHRRAD} value="Zelt/Auto/Motorrad/Fahrrad">Zelt/Auto/Motorrad/Fahrrad</option>
<option {STELLPLATZ_FÜR:_SELECTED_AUTO/WOHNWAGEN} value="Auto/Wohnwagen">Auto/Wohnwagen</option>
<option {STELLPLATZ_FÜR:_SELECTED_WOHNMOBIL_<7M} value="Wohnmobil <7m">Wohnmobil <7m</option>
<option {STELLPLATZ_FÜR:_SELECTED_WOHNMOBIL_>7M} value="Wohnmobil >7m">Wohnmobil >7m</option>
<option {STELLPLATZ_FÜR:_SELECTED_SIEHE_ANMERKUNG} value="siehe Anmerkung">siehe Anmerkung</option>
</select>
</label>
</div>
<div class="half">
<label for="anreise_am:"><span>Anreise am: <span>*</span></span>
<input required="required" class="{ANREISE_AM:_ERROR}" type="text" id="anreise_am:" name="mf_r_anreise_am:" value="{ANREISE_AM:}" />
</label>
</div>
<div class="half">
<label for="abreise_(voraussichtlich)_am:"><span>Abreise (voraussichtlich) am: <span>*</span></span>
<input required="required" class="{ABREISE_(VORAUSSICHTLICH)_AM:_ERROR}" type="text" id="abreise_(voraussichtlich)_am:" name="mf_r_abreise_(voraussichtlich)_am:" value="{ABREISE_(VORAUSSICHTLICH)_AM:}" />
</label>
</div>
<div class="full">
<label for="anmerkung"><span>Anmerkung</span>
<textarea rows="5" cols="80" class="{ANMERKUNG_ERROR}" id="anmerkung" name="mf_anmerkung">{ANMERKUNG}</textarea>
</label>
</div>
<div class="full">
<label for="datenschutzerklärung"><span>Datenschutzerklärung <span>*</span></span>
<div class="grouping {DATENSCHUTZERKLÄRUNG_ERROR}">
<input required="required" type="radio" id="i-datenschutzerklärung1" {DATENSCHUTZERKLÄRUNG_HIERMIT_ERTEILE_ICH_DIE_EINWILLIGUNG_IN_DIE_ERHEBUNG_UND_NUTZUNG_MEINER_VORSTEHEND_EINGEGEBENEN_DATEN_GEMÄß_DEN_DATENSCHUTZERKLÄRUNG_DIESER_WEBSEITE!} name="mf_r_datenschutzerklärung" value="Hiermit erteile ich die Einwilligung in die Erhebung und Nutzung meiner vorstehend eingegebenen Daten gemäß den Datenschutzerklärung dieser Webseite!" /><label for="i-datenschutzerklärung1">Hiermit erteile ich die Einwilligung in die Erhebung und Nutzung meiner vorstehend eingegebenen Daten gemäß den Datenschutzerklärung dieser Webseite!</label>
</div>
</label>
</div>
<div class="{CAPTCHA_CLASS} twothird">
<label for="captcha">
<div class="grouping {CAPTCHA_ERROR}">
{CAPTCHA}
</div>
</label>
</div>
<div class="onethird">
<button class="submit" name="Submit" type="submit"><h4>Absenden</h4></div>
</div>
</form>
</div>
</div>
<script src="http:/localhost/datapiker/include/jquery/i18n/jquery.ui.datepicker-de.js"></script>
<script>
$( function() {
$( "#anreise_am:" ).datepicker($.datepicker.regional[ "de" ] );
$( "#abreise_(voraussichtlich)_am:" ).datepicker($.datepicker.regional[ "de" ] );
} );
</script>
Was mache ich bitte verkehrt!
Gruß tennstar
Ich liebe Technik wenn sie funktioniert!
Offline
Das Problem sind die Klammern und Dppelpunkte in der ID der Felder.
Versuch mal hiermit:
<div class="miniform">
<div class="{MESSAGE_CLASS}">{STATUSMESSAGE}</div>
<div class="{FORM_CLASS}">
<h2>Anfrage/Buchung</h2>
<small>Felder mit <span><span>*</span></span> müssen ausgefüllt werden!</small>
<br/>
<form name="form_{SECTION_ID}" id="form_{SECTION_ID}" method="post" action="{URL}">
<input name="miniform" type="hidden" value="{SECTION_ID}"/>
<input name="header" type="hidden" value="Anfrage-Buchung"/>
<input name="mf_timestamp" type="hidden" value="{DATE} {TIME}"/>
<div class="full">
<label for="bitte_wählen!"><span>Bitte wählen! <span>*</span></span>
<div class="grouping {BITTE_WÄHLEN!_ERROR}">
<input required="required" type="radio" id="i-bitte_wählen!1" {BITTE_WÄHLEN!_ANFRAGE} name="mf_r_bitte_wählen!" value="Anfrage" /><label for="i-bitte_wählen!1">Anfrage</label>
<input required="required" type="radio" id="i-bitte_wählen!2" {BITTE_WÄHLEN!_BUCHUNG} name="mf_r_bitte_wählen!" value="Buchung" /><label for="i-bitte_wählen!2">Buchung</label>
</div>
</label>
</div>
<div class="half">
<label for="vorname"><span>Vorname <span>*</span></span>
<input required="required" class="{VORNAME_ERROR}" type="text" id="vorname" name="mf_r_vorname" value="{VORNAME}" />
</label>
</div>
<div class="half">
<label for="name"><span>Name <span>*</span></span>
<input required="required" class="{NAME_ERROR}" type="text" id="name" name="mf_r_name" value="{NAME}" />
</label>
</div>
<div class="full">
<label for="adresse"><span>Adresse <span>*</span></span>
<input required="required" class="{ADRESSE_ERROR}" type="text" id="adresse" name="mf_r_adresse" value="{ADRESSE}" />
</label>
</div>
<div class="onethird">
<label for="plz"><span>PLZ <span>*</span></span>
<input required="required" class="{PLZ_ERROR}" type="text" id="plz" name="mf_r_plz" value="{PLZ}" />
</label>
</div>
<div class="twothird">
<label for="wohnort"><span>Wohnort<span>*</span></span>
<input class="{WOHNORT_ERROR}" type="text" type="text" id="wohnort" name="mf_r_wohnort" value="{WOHNORT}" />
</label>
</div>
<div class="full">
<label for="e-mail_adresse"><span>E-Mail Adresse <span>*</span></span>
<input required="required" class="{E-MAIL_ADRESSE_ERROR}" type="text" id="e-mail_adresse" name="mf_r_e-mail_adresse" value="{E-MAIL_ADRESSE}" />
</label>
</div>
<div class="full">
<label for="stellplatz_für:"><span>Stellplatz für: <span>*</span></span>
<select required="required" class="{STELLPLATZ_FÜR:_ERROR}" id="stellplatz_für:" name="mf_r_stellplatz_für:">
<option {STELLPLATZ_FÜR:_SELECTED_ZELT/AUTO/MOTORRAD/FAHRRAD} value="Zelt/Auto/Motorrad/Fahrrad">Zelt/Auto/Motorrad/Fahrrad</option>
<option {STELLPLATZ_FÜR:_SELECTED_AUTO/WOHNWAGEN} value="Auto/Wohnwagen">Auto/Wohnwagen</option>
<option {STELLPLATZ_FÜR:_SELECTED_WOHNMOBIL_<7M} value="Wohnmobil <7m">Wohnmobil <7m</option>
<option {STELLPLATZ_FÜR:_SELECTED_WOHNMOBIL_>7M} value="Wohnmobil >7m">Wohnmobil >7m</option>
<option {STELLPLATZ_FÜR:_SELECTED_SIEHE_ANMERKUNG} value="siehe Anmerkung">siehe Anmerkung</option>
</select>
</label>
</div>
<div class="half">
<label for="anreise_am:"><span>Anreise am: <span>*</span></span>
<input required="required" class="{ANREISE_AM_ERROR}" type="text" id="anreise_am" name="mf_r_anreise_am" value="{ANREISE_AM}" />
</label>
</div>
<div class="half">
<label for="abreise_(voraussichtlich)_am:"><span>Abreise (voraussichtlich) am: <span>*</span></span>
<input required="required" class="{ABREISE_VORAUSSICHTLICH_AM_ERROR}" type="text" id="abreise_voraussichtlich_am" name="mf_r_abreise_voraussichtlich_am" value="{ABREISE_VORAUSSICHTLICH_AM}" />
</label>
</div>
<div class="full">
<label for="anmerkung"><span>Anmerkung</span>
<textarea rows="5" cols="80" class="{ANMERKUNG_ERROR}" id="anmerkung" name="mf_anmerkung">{ANMERKUNG}</textarea>
</label>
</div>
<div class="full">
<label for="datenschutzerklärung"><span>Datenschutzerklärung <span>*</span></span>
<div class="grouping {DATENSCHUTZERKLÄRUNG_ERROR}">
<input required="required" type="radio" id="i-datenschutzerklärung1" {DATENSCHUTZERKLÄRUNG_HIERMIT_ERTEILE_ICH_DIE_EINWILLIGUNG_IN_DIE_ERHEBUNG_UND_NUTZUNG_MEINER_VORSTEHEND_EINGEGEBENEN_DATEN_GEMÄß_DEN_DATENSCHUTZERKLÄRUNG_DIESER_WEBSEITE!} name="mf_r_datenschutzerklärung" value="Hiermit erteile ich die Einwilligung in die Erhebung und Nutzung meiner vorstehend eingegebenen Daten gemäß den Datenschutzerklärung dieser Webseite!" /><label for="i-datenschutzerklärung1">Hiermit erteile ich die Einwilligung in die Erhebung und Nutzung meiner vorstehend eingegebenen Daten gemäß den Datenschutzerklärung dieser Webseite!</label>
</div>
</label>
</div>
<div class="{CAPTCHA_CLASS} twothird">
<label for="captcha">
<div class="grouping {CAPTCHA_ERROR}">
{CAPTCHA}
</div>
</label>
</div>
<div class="onethird">
<button class="submit" name="Submit" type="submit"><h4>Absenden</h4></div>
</div>
</form>
</div>
</div>
<script src=" DEINE URL HIER /include/jquery/i18n/jquery.ui.datepicker-de.js"></script>
<script>
$( function() {
$( "#anreise_am" ).datepicker($.datepicker.regional[ "de" ] );
$( "#abreise_voraussichtlich_am" ).datepicker($.datepicker.regional[ "de" ] );
} );
</script>
Beitrag geändert von florian (09.04.2021 17:12:53)
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Danke Florian,
hab alles mögliche probiert aber auf die Klammern und Doppelpunkte bin ich nicht gekommen!
Ich liebe Technik wenn sie funktioniert!
Offline
Hallo Florian, funzt Super!
Hab jetzt auch eine andere Seite noch umgestellt mit den gleichen Script Einstellungen wie die andere, jetzt wird mir der Datepicker in englisch angezeigt, hast Du bitte auch hierfür eine Lösung.
Hab bereits die Spracheinstellung der Seite kontrolliert.
Beitrag geändert von tennstar (09.04.2021 17:43:27)
Ich liebe Technik wenn sie funktioniert!
Offline
Da steht noch der Link zu meiner Testwebsite drin, d.h. Du musst
<script src="http://dev2.wbce-cms.eu/5/include/jquery/i18n/jquery.ui.datepicker-de.js"></script>
durch
<script src="https://reiterhof-geierwally.at/include/jquery/i18n/jquery.ui.datepicker-de.js"></script>
ersetzen, dann sollte es gehen.
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Super, bin nicht drauf gekommen weil Deine Datei ja auch mit "de" endet!
Ich liebe Technik wenn sie funktioniert!
Offline
Seiten: 1