Zurück zu Blog

So fügen Sie Ihrem Webflow-Formular eine Datumsauswahl hinzu

Erfahren Sie, wie Sie in 30 Sekunden eine anpassbare Datumsauswahl zu Ihrem Webflow-Formular hinzufügen können. Die Version des Bereichsdatums ist auch in unserem Leitfadenbereich verfügbar

Überblick 📚.

Das Hinzufügen einer Datumsauswahl in Ihre Webflow-Formulare muss nicht kompliziert sein, und es muss auch nicht hässlich sein.

Aus diesem Grund haben wir eine schöne, moderne Datumsauswahl entwickelt, die Sie in Ihre eigenen Projekte integrieren können.

Diese Datumsauswahl verwendet ein Attribut, das Sie an ein Eingabefeld anhängen, so dass es wirklich nicht einfacher sein könnte.

Um dies in Ihr Projekt einzufügen, folgen Sie den einfachen Schritten und fügen Sie den benutzerdefinierten Code in Ihr Projekt oder Ihre Seiteneinstellungen ein.

{{ Template "gist" "text:Inside <head> tag" "id:1d63d47a3b32eb0edaee5bcd91495382" }}
{{ Template "gist" "text:Before </body> tag" "id:708e24dd706ae5ae08def8d93988b27c" }}

Anweisungen ✍️

1. Fügen Sie den benutzerdefinierten Code in Ihre Seite ein.

Navigate to your project or page settings area and add the custom code into both the <head> and </body> tag area.

Wir haben einige der grundlegenden CSS-Eigenschaften eingefügt, damit Sie die Farbstile leicht an Ihre Anforderungen anpassen können.

Dieses Projekt basiert auf dem wunderbar einfachen Jquery-Plugin von Fengyuan Chen (Github).

Nur-Lese-Vorschau (Code in Seiteneinstellungen)

https://preview.webflow.com/preview/webflow-date-picker?utm_medium=preview_link&utm_source=designer&utm_content=webflow-date-picker&preview=033289c86d17f2026974458c59b41ec8&workflow=preview

Add the following style sheet inside the <head> tag of your custom code section


2. Hinzufügen des js-Skripts und der benutzerdefinierten Stile

Add this code inside the before </body> tag of your custom code:

3. Ein Eingabefeld und benutzerdefinierte Attribute hinzufügen

Das Eingabefeld muss in Ihren Formularabschnitt eingefügt werden. Sobald Sie die Eingabe hinzugefügt haben, navigieren Sie zum Einstellungsfenster und fügen die Attribute hinzu

4. Benutzerdefinierte Attribute

Das Eingabefeld muss in Ihren Formularabschnitt eingefügt werden. Sobald Sie die Eingabe hinzugefügt haben, navigieren Sie zum Einstellungsfenster und fügen die Attribute hinzu

  • data-toggle - Datumsauswahl
  • Autovervollständigen - aus

5. Veröffentlichen & Testen

Das war's. Sie können das CSS gestalten, wenn Sie damit zufrieden sind. Denken Sie daran, dass dies nur auf Ihrer Live-Domain sichtbar sein wird und nicht im Designer in der Vorschau angezeigt werden kann.

6. Farben und Datumsformat aktualisieren

Sie können die Systemfarben leicht aktualisieren, indem Sie die ersten Zeilen in den Stilen verwenden

--main-light-color: #f3f5fb;
--main-dark-color: #321f59;
--main-active-color: #642eff;

Beispiel für Farbaktualisierungen von Joe (https://twitter.com/cuhpajo)

Danke!

ANDERE ANLEITUNGEN &AMP; LEKTIONEN

Steigern Sie Ihre Webflow-Site weiter.

Schließen Sie sich heute über 30.000
Creators an.

Tragen Sie sich in unsere Newsletter-Liste ein, um gelegentliche Updates, Produkte und Einblicke zu erhalten.

Danke schön! Ihre Einsendung ist eingegangen!
Hoppla! Beim Einreichen des Formulars ist etwas schiefgegangen.
Schließen Sie sich 30.000+ anderen Kreativen in unseren Gemeinschaften an.