Como personalizar o seletor de tempo do campo Data-Hora

Introdução

Gostaria de personalizar o campo Data / Hora para o seletor de tempo no WPForms? O Time Picker fornece ao utilizador uma lista de horas para escolher. Esses horários podem ser alterados para que apenas um intervalo de tempo específico esteja disponível. Também é possível fornecer uma opção integrada no construtor de formulários para limitar determinados horários.

Para saber mais sobre a configuração de um limite único para o seletor de tempo, consulte esta documentação.

Neste tutorial, mostraremos como personalizar o seletor de tempo no campo Tempo para desativar várias vezes usando um pequeno snippet PHP.

Criar o seu formulário

Primeiro, vamos criar um novo formulário, adicionar os nossos campos e adicionar um campo de formulário Tempo.

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

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

crie o seu formulário e defina o limite de horas no separador Avançadas das opções do campo de tempo

Adicionar o snippet

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

Há três formas diferentes de o aplicar:

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

Escolha o fragmento de código que melhor se adapta às suas necessidades e copie-o para o seu sítio.

Se precisar de ajuda sobre como adicionar snippets ao seu sítio, consulte este tutorial .

O seletor de tempo pode ser ainda mais personalizado utilizando as opções disponíveis na biblioteca jQuery timepicker.

Todos os apanhadores de tempo em todo o site

O que se segue aplica-se a todos os seleccionadores de tempo no sítio.

/**
 * 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 selectores de tempo dentro de um formulário específico

O que se segue aplica-se a todos os selectores de tempo 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 que se segue aplica-se ao seletor de tempo no campo ID 8 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 ajuda para identificar os IDs de formulário ou de campo, consulte este artigo.

os visitantes podem ver as faixas horárias, mas não podem seleccioná-las

Os seus visitantes podem ver as horas que desactivou com o snippet, mas não poderão seleccioná-las.

Isso é tudo o que você precisa para personalizar o seletor de tempo para o campo Data / Hora no WPForms. Gostaria de criar formatos adicionais para o seu Date Picker? Nosso tutorial, Como criar formatos adicionais para o campo de data, mostrará como você pode usar o PHP para conseguir isso.

Referência da ação: wpforms_wp_footer

FAQ

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

R: Com certeza! Por defeito, o construtor de formulários WPForms dá-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, 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 );

Lembre-se apenas de alterar o window.wpforms_797 e o step: '5' para corresponder ao seu ID de formulário e ao intervalo de tempo que pretende utilizar.