Como Alterar a Posição do Popup do Seletor de Datas

Introdução

Gostaria de personalizar a posição do popup do campo Date Picker com um simples snippet? Por defeito, o popup ajusta-se dinamicamente com base na colocação do campo e na barra de scroll da página. Este tutorial irá guiá-lo através do processo, oferecendo instruções passo a passo sobre como definir a posição do popup permanentemente usando um snippet.

Criação do formulário

Vamos começar por criar o nosso formulário e incorporar dois campos de formulário de seleção de data.

Após adicionar os campos de formulário Date, navegue até ao separador Advanced e opte por Date Picker no menu suspenso Date.

Se precisar de ajuda para criar o seu formulário, por favor, reveja esta documentação.

Adição do trecho de código

Em seguida, terá de adicionar um pequeno snippet de código ao seu site para alterar a posição do popup. Se não tem a certeza de como adicionar snippets ao seu site, por favor, veja este tutorial.

Para todos os formulários

Use este snippet para todos os seletores de data do WPForms no seu 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 );

Para um formulário específico

Para direcionar um formulário específico e um ID de campo, por favor, use este 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 );

No snippet acima, estamos a direcionar o ID do formulário 21 e, dentro desse formulário, estamos a direcionar apenas o ID do campo 1.

Se precisar de ajuda para encontrar os IDs do seu formulário e campo, por favor, veja este tutorial.

E é tudo o que precisa para alterar a colocação do popup do seletor de data. Gostaria de personalizar ainda mais o campo seletor de data? Dê uma vista de olhos ao nosso tutorial sobre Como Permitir Intervalo de Datas ou Múltiplas Datas no Seletor de Data.

Relacionado

Referência de Ação: wpforms_wp_footer_end