Come cambiare la posizione del popup del selettore di date

Introduzione

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

Creazione del modulo

Iniziamo creando il nostro modulo e incorporando due campi modulo di selezione data.

Dopo aver aggiunto i campi modulo Data, vai alla scheda Avanzate e scegli Date Picker dal menu a discesa Data.

Se hai bisogno di aiuto nella creazione del tuo modulo, esamina questa documentazione.

Aggiunta dello snippet

Successivamente, dovrai aggiungere un piccolo snippet di codice al tuo sito per modificare la posizione del popup. Se non sei sicuro di come aggiungere snippet al tuo sito, dai un'occhiata a questo tutorial.

Per tutti i moduli

Usa questo snippet per tutti i date picker di WPForms sul tuo 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 indirizzare un modulo e un ID campo specifici, usa 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 sopra, stiamo indirizzando l'ID del modulo 21 e all'interno di quel modulo, stiamo indirizzando solo l'ID del campo 1.

Se hai bisogno di aiuto per trovare gli ID dei tuoi moduli e campi, consulta questo tutorial.

E questo è tutto ciò che ti serve per cambiare il posizionamento del popup del date picker. Desideri personalizzare ulteriormente il campo date picker? Dai un'occhiata al nostro tutorial su Come consentire intervalli di date o date multiple nel Date Picker.

Correlati

Riferimento Azione: wpforms_wp_footer_end