Como Personalizar o Seletor de Hora do Campo Data e Hora

Introdução

Gostaria de personalizar o campo Data / Hora para o seletor de horário no WPForms? O Seletor de Horário oferece ao usuário uma lista de horários para escolher. Esses horários podem ser alterados para que apenas um intervalo de tempo específico esteja disponível. Você também pode fornecer uma opção integrada no construtor de formulários para limitar horários específicos.

Para saber mais sobre como configurar um limite único para o seletor de horário, consulte esta documentação.

Neste tutorial, mostraremos como personalizar o seletor de horário no campo Horário para desabilitar vários horários usando um pequeno trecho de PHP.

Criando seu formulário

Primeiro, criaremos um novo formulário, adicionaremos nossos campos e um campo de formulário Horário.

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

Para o nosso formulário, usaremos as opções na aba Avançado para Limitar Horas das 8h às 17h para o horário de abertura e fechamento do nosso escritório.

Adicionando o snippet

Em seguida, queremos desabilitar o horário das 9h às 10h para uma reunião diária em toda a empresa, mas também queremos desabilitar o intervalo de horário das 12h às 13h, que é o horário de almoço. Para fazer isso, precisamos adicionar um trecho ao nosso site.

Existem três maneiras diferentes de aplicar isso:

• Todos os seletores de horário em todo o site
• Todos os seletores de horário dentro de um formulário específico
• Um seletor de horário específico dentro de um formulário específico.

Escolha o trecho de código que funciona para suas necessidades e copie-o para o seu site.

Se precisar de ajuda sobre como adicionar trechos ao seu site, consulte este tutorial.

Todos os seletores de horário em todo o site

O abaixo se aplicará a todos os seletores de horário no site.

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

Todos os seletores de horário dentro de um formulário específico

O abaixo se aplicará a todos os seletores de horário dentro do formulário 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 );

Um seletor de horário específico dentro de um formulário específico

O abaixo se aplicará ao seletor de horário dentro do campo ID 8 dentro do formulário 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 precisar de alguma assistência para identificar os IDs de formulário ou campo, revise este artigo.

Seus visitantes podem ver os horários que você desabilitou com o trecho, mas não poderão selecioná-los.

É tudo o que você precisa para personalizar o seletor de horário para o campo Data / Hora no WPForms. Gostaria de criar formatos adicionais para o seu Seletor de Data? Nosso tutorial, Como Criar Formatos Adicionais para o Campo de Data mostrará como você pode usar PHP para conseguir isso.

Relacionado

Referência de Ação: wpforms_wp_footer

Perguntas Frequentes

P: Posso usar este filtro para alterar os intervalos de tempo?

R: Com certeza! Por padrão, o construtor de formulários WPForms oferecerá a opção de definir seus intervalos de tempo como 15 minutos, 30 minutos e 1 hora. Para alterar os intervalos de tempo para 5 minutos, você usaria o seguinte código:

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

Apenas lembre-se de alterar o window.wpforms_797 e o step: '5' para corresponder ao ID do seu formulário e ao intervalo de tempo que deseja usar.