Kontaktformular 7 – Platzhalter zum Datumsfeld hinzufügen

Lesezeit: 3 Minuten

Ich habe zwei Felder auf einer Website, in denen Benutzer ein Datum für die Abholung und Rückgabe eines Mietfahrzeugs auswählen können.

Ich brauche einen Platzhalter in beiden Feldern, um anzugeben, welche Informationen in jedem Feld erforderlich sind.

Ich habe den offiziellen Rat befolgt hierindem Sie Folgendes tun:

2023

2023

Das Ergebnis ist jedoch einfach das leere Datum.

Der Platzhalter ist auch im ausgegebenen HTML-Code vorhanden:

<input type="date" name="FromDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false" placeholder="Start Date">

Verweisen contactform7.com/date-field. Es erklärt, wie man Platzhalter hinzufügt date field.

– WP-Lerner

12. Februar 2019 um 10:42 Uhr
@ user2584538 Tut mir leid, wenn ich es komplett vermisse, aber ich denke, diese Seite verweist nur auf die Seite, die ich oben verlinkt habe und die bei mir nicht funktioniert?

– Sam Johnson

12. Februar 2019 um 10:49 Uhr
Diese Referenz hat den vollständigen Code 2023

– WP-Lerner

12. Februar 2019 um 10:50 Uhr
@ user2584538 Nochmals, vielleicht verstehe ich das falsch – aber das scheint keinen Platzhalter zu erstellen. Wenn ich genau diesen Code kopiere und einfüge, werden nur die Daten eingeschränkt, die ausgewählt werden können.

– Sam Johnson

12. Februar 2019 um 10:53 Uhr
"2013-04-01" Dies ist der Platzhaltertext des obigen Snippets. Ignorieren Sie, was Sie nicht mögen möchten min und/oder max.

– WP-Lerner

12. Februar 2019 um 10:57 Uhr

Füge das hinzu:

<input type="text" onfocus="(this.type="date")" onblur="(this.type="text")"  name="FromDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false" placeholder="Start Date">

Danke, wie würde ich das dem Shortcode hinzufügen?

– Sam Johnson

12. Februar 2019 um 10:47 Uhr
Beim Bearbeiten des Formulars über die Contact Form 7-Oberfläche können Sie die generierten einfach ersetzen 2023 direkt mit diesem HTML-Tag versehen.

– Thomas Müller

9. Juli 2020 um 18:56 Uhr
Dies funktioniert nicht auf einem iOS-Gerät. Bitte geben Sie mir eine Lösung

– Maulik Patel

26. März 2021 um 4:10 Uhr
Irgendeine Idee, wie man das Anzeigeformat ändert?

– Jean Willian SJ

6. September 2021 um 12:16 Uhr
@ThomasMiller könnten Sie die genaue Syntax teilen, wie Sie es zum Shortcode {Date..} hinzufügen

– Debosmit Majumder

16. August um 12:32 Uhr

Titelträger

Sie können dieses WordPress-Plugin verwenden: https://wordpress.org/plugins/date-time-picker-for-contact-form-7/

Nachdem Sie das Plugin installiert und aktiviert haben, fügen Sie einfach ein Textfeld hinzu und fügen Sie die entsprechende Klasse hinzu:

[text EventDate class:walcf7-datepicker placeholder"Event date"]

Klassen:
Nur für Datumsauswahl: walcf7-datepicker

Nur für Zeitauswahl: walcf7-timepicker

Sowohl für die Datums- als auch für die Zeitauswahl: walcf7-datetimepicker

Die Antwort von “Dino” (12. Februar ’19) funktioniert einwandfrei. Sie müssten name=”INSERTMAILDATENAME” in den Namen Ihres Datepickers ändern. In meinem Fall wurde das Feld durch name=”your-date” ersetzt. Nach dieser Änderung funktioniert es einwandfrei. : Ö)

Dies ist nur ein Update.

Verwenden Sie dies:

<input type="text" onfocus="(this.type="date")" onblur="(this.type="text")"  name="FromDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false" placeholder="Start Date">

Schlägt fehl, wenn die Eingabe verlassen wird, dh onblur

Der Code, der für mich funktioniert hat, ist:

<input type="text" onfocusin="(this.type="date")" onfocusout="(this.type="text")"  name="FromDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false" placeholder="Start Date">

Ich glaube, die onfocusout-Eigenschaft war aufgrund ihrer sprudelnden Eigenschaft die einzige Lösung.

Lesen Sie: onfocus vs onfocusin & onblur vs onfocusout

14351000cookie-checkKontaktformular 7 – Platzhalter zum Datumsfeld hinzufügen

#Kontaktformular-7 #WordPress