Comment modifier la position de la fenêtre contextuelle du sélecteur de date

Introduction

Souhaitez-vous personnaliser la position de la fenêtre contextuelle du champ Sélecteur de date à l'aide d'un simple extrait de code ? Par défaut, la fenêtre contextuelle s'ajuste dynamiquement en fonction de l'emplacement du champ et de la barre de défilement de la page. Ce tutoriel vous guidera tout au long du processus, en fournissant des instructions étape par étape sur la façon de définir la position de la fenêtre contextuelle de manière permanente à l'aide d'un extrait de code.

Création du formulaire

Commençons par créer notre formulaire et y intégrer deux champs de formulaire de sélection de date.

Après avoir ajouté les champs de formulaire Date, accédez à l'onglet Avancé et choisissez Sélecteur de date dans le menu déroulant Date.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Ajout du snippet

Ensuite, vous devrez ajouter un petit extrait de code à votre site pour modifier la position de la fenêtre contextuelle. Si vous n'êtes pas sûr de la façon d'ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

Pour tous les formulaires

Utilisez cet extrait de code pour tous les sélecteurs de date WPForms sur votre site.

/**
 * 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 );

Pour un formulaire spécifique

Pour cibler un formulaire et un ID de champ spécifiques, veuillez utiliser cet extrait de code.

/**
 * 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 );

Dans l'extrait de code ci-dessus, nous ciblons l'ID du formulaire 21 et, à l'intérieur de ce formulaire, nous ciblons uniquement l'ID du champ 1.

Si vous avez besoin d'aide pour trouver les ID de vos formulaires et champs, veuillez consulter ce tutoriel.

Et c'est tout ce dont vous avez besoin pour modifier l'emplacement de la fenêtre contextuelle du sélecteur de date. Souhaitez-vous personnaliser davantage le champ du sélecteur de date ? Consultez notre tutoriel sur Comment autoriser une plage de dates ou plusieurs dates dans le sélecteur de date.

Articles associés

Référence d’action : wpforms_wp_footer_end