Come modificare la posizione del popup del selezionatore di date

Introduzione

Si desidera personalizzare la posizione del popup del campo Date Picker con un semplice snippet? Per impostazione predefinita, il popup si regola dinamicamente in base al posizionamento del campo e alla barra di scorrimento della pagina. Questo tutorial vi guiderà attraverso il processo, offrendovi istruzioni passo passo su come impostare la posizione del popup in modo permanente utilizzando uno snippet.

Creazione del modulo

Iniziamo con la creazione del nostro modulo e incorporiamo due campi di selezione della data.

Dopo aver aggiunto i campi del modulo Data, spostarsi nella scheda Avanzate e scegliere Date Picker dal menu a tendina Data.

Se avete bisogno di aiuto per creare il vostro modulo, consultate questa documentazione.

Aggiunta dello snippet

Successivamente, è necessario aggiungere un piccolo snippet di codice al sito per modificare la posizione del popup. Se non sapete come aggiungere gli snippet al vostro sito, consultate questo tutorial.

Per tutte le forme

Utilizzate questo snippet per tutti i selezionatori di date di WPForms sul vostro sito.

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

Per un modulo specifico

Per puntare a un modulo specifico e all'ID del campo, utilizzare questo 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 );

Nello snippet qui sopra, stiamo puntando all'ID del modulo 21 e all'interno di questo modulo, stiamo puntando solo all'ID del campo 1.

Se avete bisogno di aiuto per trovare gli ID del modulo e del campo, consultate questa guida.

Questo è tutto ciò che serve per modificare il posizionamento del popup del selezionatore di date. Volete personalizzare ulteriormente il campo di selezione della data? Date un'occhiata al nostro tutorial su Come consentire un intervallo di date o più date nel selezionatore di date.

Correlato

Riferimento azione: wpforms_wp_footer_end