Como alterar a posição do popup do Date Picker

Introdução

Gostaria de personalizar a posição do popup do campo Date Picker utilizando um simples snippet? Por padrão, o pop-up se ajusta dinamicamente com base no posicionamento do campo e na barra de rolagem 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.

Criar o formulário

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

Depois de adicionar os campos do formulário Data, navegue até ao separador Avançadas e opte por Date Picker no menu pendente Data.

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

Adicionar o snippet

Em seguida, é necessário adicionar um pequeno trecho de código ao seu site para alterar a posição do pop-up. Se não tiver a certeza de como adicionar snippets ao seu site, consulte este tutorial.

Para todos os formulários

Use este snippet para todos os selecionadores de data do WPForms em 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 e um ID de campo específicos, utilize 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 visar o ID de formulário 21 e, dentro desse formulário, estamos a visar apenas o ID de campo 1.

Se precisar de ajuda para encontrar os IDs do formulário e do campo, consulte este tutorial.

E é tudo o que precisa para alterar o posicionamento do pop-up do seletor de datas. Gostaria de personalizar ainda mais o campo de seleção de data? Dê uma olhada no nosso tutorial sobre Como permitir o intervalo de datas ou várias datas no selecionador de datas.

Relacionadas

Referência da ação: wpforms_wp_footer_end