Anpassen des Datums-/Zeitfelds: Zeitauswahl

Einleitung

Möchten Sie das Feld Datum / Uhrzeit für die Zeitauswahl in WPForms anpassen? Die Zeitauswahl bietet dem Benutzer eine Liste von Zeiten zur Auswahl. Diese Zeiten können geändert werden, sodass nur ein bestimmter Zeitraum verfügbar ist. Sie können auch eine integrierte Option im Formular-Generator bereitstellen, um bestimmte Zeiten einzuschränken.

Um mehr über die Einrichtung einer einzelnen Einschränkung für die Zeitauswahl zu erfahren, lesen Sie bitte diese Dokumentation.

In diesem Tutorial zeigen wir Ihnen, wie Sie die Zeitauswahl im Feld Uhrzeit anpassen, um mehrere Zeiten mithilfe eines kleinen PHP-Snippets zu deaktivieren.

Erstellen Ihres Formulars

Zuerst erstellen wir ein neues Formular, fügen unsere Felder hinzu und fügen ein Uhrzeit-Formularfeld hinzu.

Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.

Für unser Formular verwenden wir die Optionen auf der Registerkarte Erweitert, um die Stundenbegrenzung auf 8 bis 17 Uhr für unsere Büroöffnungs- und -schlusszeiten festzulegen.

Hinzufügen des Snippets

Als Nächstes möchten wir die Zeit von 9 bis 10 Uhr für ein tägliches unternehmensweites Meeting deaktivieren, aber wir möchten auch den Zeitfenster von 12 bis 13 Uhr deaktivieren, was auch die Mittagspause ist. Um dies zu tun, müssen wir einen Code-Schnipsel zu unserer Website hinzufügen.

Es gibt drei verschiedene Möglichkeiten, dies anzuwenden:

• Alle Zeitauswahlen auf der gesamten Website
• Alle Zeitauswahlen innerhalb eines bestimmten Formulars
• Eine bestimmte Zeitauswahl innerhalb eines bestimmten Formulars.

Wählen Sie den Code-Schnipsel, der Ihren Anforderungen entspricht, und kopieren Sie ihn auf Ihre Website.

Wenn Sie Hilfe beim Hinzufügen von Code-Schnipseln zu Ihrer Website benötigen, sehen Sie sich dieses Tutorial an.

Alle Zeitauswahlen auf der gesamten Website

Das Folgende gilt für alle Zeitauswahlen auf der Website.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        window.wpforms_timepicker = {

			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}

add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

Alle Zeitauswahlen innerhalb eines bestimmten Formulars

Das Folgende gilt für alle Zeitauswahlen im Formular mit der ID 879.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        // Change this _879 to match the form ID you have on your own form
        window.wpforms_879 = window.wpforms_879 || {};
        window.wpforms_879.timepicker = {

			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

Eine bestimmte Zeitauswahl innerhalb eines bestimmten Formulars

Das Folgende gilt für die Zeitauswahl im Feld mit der ID 8 innerhalb des Formulars mit der ID 879.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        // Change this _879_8 to match the form ID and the field ID you have on your own form
        window.wpforms_879_8 = window.wpforms_879_8 || {};
        window.wpforms_879_8.timepicker = {

            forceRoundTime: true,
			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

Wenn Sie Hilfe bei der Identifizierung der Formular- oder Feld-IDs benötigen, lesen Sie bitte diesen Artikel.

Ihre Besucher können die von Ihnen deaktivierten Zeiten mit dem Code-Schnipsel sehen, aber sie können sie nicht auswählen.

Das ist alles, was Sie brauchen, um die Zeitauswahl für das Feld Datum / Uhrzeit in WPForms anzupassen. Möchten Sie zusätzliche Formate für Ihre Datumsanzeige erstellen? Unser Tutorial Zusätzliche Formate für das Datumsfeld erstellen zeigt Ihnen, wie Sie PHP verwenden können, um dies zu erreichen.

Verwandt

Aktionsreferenz: wpforms_wp_footer

FAQ

F: Kann ich diesen Filter auch verwenden, um die Zeitintervalle zu ändern?

A: Absolut! Standardmäßig bietet Ihnen der WPForms-Formular-Generator die Möglichkeit, Ihre Zeitintervalle auf 15 Minuten, 30 Minuten und 1 Stunde einzustellen. Um die Zeitintervalle auf 5 Minuten zu ändern, würden Sie den folgenden Code verwenden:

/**
 * Change the time intervals on the time picker
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>
    <script type="text/javascript">

        // Change this _797 to match your own form ID number
        window.wpforms_797 = window.wpforms_797 || {};
        window.wpforms_797.timepicker = {
            
            // Limit times to every 5 minutes
            step: '5'
        };

    </script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

Denken Sie daran, window.wpforms_797 und step: '5' zu ändern, damit sie Ihrer Formular-ID und dem gewünschten Zeitintervall entsprechen.