Como Personalizar o Seletor de Hora do Campo Data e Hora

Introdução

Gostaria de personalizar o campo Data / Hora para o seletor de hora no WPForms? O Seletor de Hora fornece ao utilizador uma lista de horas para escolher. Estas horas podem ser alteradas para que apenas um intervalo de tempo específico esteja disponível. Também pode fornecer uma opção integrada no construtor de formulários para limitar horas específicas.

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

Neste tutorial, mostraremos como personalizar o seletor de hora no campo Hora para desativar várias horas usando um pequeno trecho de PHP.

Criar o seu formulário

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

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

Para o nosso formulário, vamos usar as opções no separador Avançadas para Limitar Horas das 8h às 17h para a hora de abertura e fecho do nosso escritório.

Adição do trecho de código

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

Existem três formas diferentes de aplicar isto:

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

Escolha o trecho de código que funciona para as 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 hora em todo o site

O abaixo aplicar-se-á a todos os seletores de hora 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 hora dentro de um formulário específico

O abaixo aplicar-se-á a todos os seletores de hora 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 hora específico dentro de um formulário específico

O abaixo aplicar-se-á ao seletor de hora 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 do formulário ou do campo, revêja este artigo.

Os seus visitantes podem ver as horas que desativou com o trecho, mas não poderão selecioná-las.

É tudo o que precisa para personalizar o seletor de hora para o campo Data / Hora no WPForms. Gostaria de criar formatos adicionais para o seu Seletor de Data? O nosso tutorial, Como Criar Formatos Adicionais para o Campo de Data, mostrar-lhe-á como pode usar PHP para conseguir isto.

Relacionado

Referência de Ação: wpforms_wp_footer

FAQ

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

R: Absolutamente! Por defeito, o construtor de formulários WPForms dar-lhe-á a opção de definir os seus intervalos de tempo para 15 minutos, 30 minutos e 1 hora. Para alterar os intervalos de tempo para 5 minutos, 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.