Come personalizzare il selettore di orario del campo Data/Ora

Introduzione

Il selettore di orario può essere personalizzato ulteriormente utilizzando le opzioni disponibili nella libreria jQuery timepicker.

Per saperne di più sulla configurazione di un singolo limite per il selettore di orario, consulta questa documentazione.

In questo tutorial, ti mostreremo come personalizzare il selettore di orario sul campo Ora per disabilitare più orari utilizzando un piccolo snippet PHP.

Creazione del tuo modulo

Per prima cosa, creeremo un nuovo modulo, aggiungeremo i nostri campi e aggiungeremo un campo modulo Ora.

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

Per il nostro modulo, utilizzeremo le opzioni nella scheda Avanzate per Limitare le Ore dalle 8:00 alle 17:00 per l'orario di apertura e chiusura del nostro ufficio.

Aggiunta dello snippet

Successivamente, vogliamo disabilitare l'orario dalle 9:00 alle 10:00 per una riunione aziendale giornaliera, ma vogliamo anche disabilitare la fascia oraria 12:00-13:00, che è anche l'ora di pranzo. Per fare ciò, dobbiamo aggiungere uno snippet al nostro sito.

Ci sono tre modi diversi in cui questo può essere applicato:

• Tutti i selettori di orario a livello di sito
• Tutti i selettori di orario all'interno di un modulo specifico
• Un selettore di orario specifico all'interno di un modulo specifico.

Scegli lo snippet di codice che funziona per le tue esigenze e copialo sul tuo sito.

Se hai bisogno di aiuto su come aggiungere snippet al tuo sito, consulta questo tutorial.

Tutti i selettori di orario a livello di sito

Quanto segue si applicherà a tutti i selettori di orario sul sito.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        window.wpforms_timepicker = {

			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}

add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

Tutti i selettori di orario all'interno di un modulo specifico

Quanto segue si applicherà a tutti i selettori di orario all'interno del modulo ID 879.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        // Change this _879 to match the form ID you have on your own form
        window.wpforms_879 = window.wpforms_879 || {};
        window.wpforms_879.timepicker = {

			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

Un selettore di orario specifico all'interno di un modulo specifico

Quanto segue si applicherà al selettore di orario all'interno del campo ID 8 all'interno del modulo ID 879.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        // Change this _879_8 to match the form ID and the field ID you have on your own form
        window.wpforms_879_8 = window.wpforms_879_8 || {};
        window.wpforms_879_8.timepicker = {

            forceRoundTime: true,
			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

Se hai bisogno di assistenza nell'identificazione degli ID del modulo o del campo, consulta questo articolo.

I tuoi visitatori possono vedere gli orari che hai disabilitato con lo snippet, ma non potranno selezionarli.

Questo è tutto ciò che ti serve per personalizzare il selettore di orario per il campo Data / Ora in WPForms. Desideri creare formati aggiuntivi per il tuo Selettore di Data? Il nostro tutorial, Come Creare Formati Aggiuntivi per il Campo Data ti mostrerà come puoi usare PHP per ottenere questo risultato.

Correlati

Riferimento azione: wpforms_wp_footer

FAQ

D: Posso usare anche questo filtro per cambiare gli intervalli di tempo?

R: Assolutamente! Per impostazione predefinita, il generatore di moduli WPForms ti darà l'opzione di impostare i tuoi intervalli di tempo a 15 minuti, 30 minuti e 1 ora. Per cambiare gli intervalli di tempo a 5 minuti, useresti il seguente codice:

/**
 * Change the time intervals on the time picker
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>
    <script type="text/javascript">

        // Change this _797 to match your own form ID number
        window.wpforms_797 = window.wpforms_797 || {};
        window.wpforms_797.timepicker = {
            
            // Limit times to every 5 minutes
            step: '5'
        };

    </script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

Ricorda solo di cambiare window.wpforms_797 e step: '5' per farli corrispondere all'ID del tuo modulo e all'intervallo di tempo che desideri utilizzare.