So ändern Sie die Position des Datumsfeld-Popups

Einleitung

Möchten Sie die Position des Popups des Feldes Date Picker mit einem einfachen Snippet anpassen? Standardmäßig passt sich das Popup dynamisch an die Platzierung des Feldes und die Scrollleiste der Seite an. Dieses Tutorial führt Sie durch den Prozess und bietet Schritt-für-Schritt-Anleitungen, wie Sie die Position des Popups mit einem Snippet dauerhaft festlegen.

Erstellung des Formulars

Beginnen wir mit der Erstellung unseres Formulars und der Einbindung von zwei Datumsfeld-Formularfeldern.

Nachdem Sie die Formularfelder Datum hinzugefügt haben, navigieren Sie zur Registerkarte Erweitert und wählen Sie Datumsfeld aus dem Dropdown-Menü Datum.

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

Hinzufügen des Snippets

Als Nächstes müssen Sie einen kleinen Code-Snippet zu Ihrer Website hinzufügen, um die Position des Popups zu ändern. Wenn Sie nicht sicher sind, wie Sie Snippets zu Ihrer Website hinzufügen, lesen Sie bitte dieses Tutorial.

Für alle Formulare

Verwenden Sie dieses Snippet für alle WPForms-Datumsfelder auf Ihrer Website.

/**
 * Change the position of the date picker popup
 *
 * @link https://wpforms.com/developers/how-to-change-the-position-of-the-date-picker-popup/
 */
  
function wpf_move_datepicker_placement() {
    ?>

    <script type="text/javascript">

        var d = new Date();
        window.wpforms_datepicker = {
			
			// Set the date picker popup to "above" or "below"
			position: "above"
        
		}

    </script>

    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_move_datepicker_placement', 10 );

Für ein bestimmtes Formular

Um ein bestimmtes Formular und eine bestimmte Feld-ID anzusprechen, verwenden Sie bitte dieses Snippet.

/**
 * Change the position of the date picker popup for a specific form and field ID
 *
 * @link https://wpforms.com/developers/how-to-change-the-position-of-the-date-picker-popup/
 */
  
function wpf_move_datepicker_placement() {
    ?>

    <script type="text/javascript">

        var d = new Date();
        window.wpforms_21_1 = window.wpforms_21_1 || {};
        window.wpforms_21_1.datepicker = {

            // Set the date picker popup to "above" or "below"
            position: "above"
        }

    </script>

    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_move_datepicker_placement', 10 );

Im obigen Snippet zielen wir auf die Formular-ID 21 und innerhalb dieses Formulars zielen wir nur auf die Feld-ID 1.

Wenn Sie Hilfe beim Finden Ihrer Formular- und Feld-IDs benötigen, sehen Sie bitte dieses Tutorial an.

Und das ist alles, was Sie brauchen, um die Platzierung des Datumsfeld-Popups zu ändern. Möchten Sie das Datumsfeld weiter anpassen? Schauen Sie sich unser Tutorial an Wie Sie Datumsbereiche oder mehrere Daten im Datumsfeld zulassen.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end