Cómo cambiar la posición del popup del selector de fecha

Introducción

¿Te gustaría personalizar la posición del popup del campo Selector de fecha con un simple fragmento? Por defecto, el popup se ajusta dinámicamente según la ubicación del campo y la barra de desplazamiento de la página. Este tutorial te guiará a través del proceso, ofreciendo instrucciones paso a paso sobre cómo establecer la posición del popup de forma permanente utilizando un fragmento.

Creación del formulario

Comencemos creando nuestro formulario e incorporando dos campos de formulario de selector de fecha.

Después de añadir los campos de formulario de Fecha, navega a la pestaña Avanzado y elige Selector de fecha en el menú desplegable Fecha.

Si necesita ayuda para crear su formulario, revise esta documentación.

Añadir el fragmento

A continuación, necesitarás añadir un pequeño fragmento de código a tu sitio para cambiar la posición del popup. Si no estás seguro de cómo añadir fragmentos a tu sitio, consulta este tutorial.

Para todos los formularios

Utiliza este fragmento para todos los selectores de fecha de WPForms en tu sitio.

/**
 * 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 un formulario específico

Para dirigirte a un formulario y un ID de campo específicos, utiliza este fragmento.

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

En el fragmento anterior, nos dirigimos al ID del formulario 21 y, dentro de ese formulario, nos dirigimos únicamente al ID del campo 1.

Si necesitas ayuda para encontrar los IDs de tu formulario y campo, consulta este tutorial.

Y eso es todo lo que necesitas para cambiar la ubicación del popup del selector de fecha. ¿Te gustaría personalizar aún más el selector de fecha? Echa un vistazo a nuestro tutorial sobre Cómo permitir rangos de fechas o fechas múltiples en el selector de fecha.

Relacionado

Referencia de acción: wpforms_wp_footer_end