Como Criar Intervalos de Tempo Adicionais para o Seletor de Hora

Gostaria de personalizar os intervalos de tempo disponíveis no seletor de Hora do campo Data/Hora? Por defeito, o Seletor de Hora oferece intervalos definidos em 15 minutos, 30 minutos e 1 hora.

No entanto, se necessitar de incrementos de tempo mais específicos, pode facilmente criar intervalos adicionais para melhor se adequar às suas necessidades. Neste tutorial, vamos mostrar-lhe como!

Adicionar intervalos de tempo adicionais

Vamos começar por adicionar o trecho de código que criará intervalos de tempo adicionais no nosso construtor de formulários. Para tal, terá de copiar e colar este trecho de código no seu site.

Se precisar de ajuda para adicionar trechos de código ao seu site, consulte este tutorial.

/**
 * Add additional time intervals for the Time field Interval dropdown
 *
 * @link   https://wpforms.com/developers/how-to-create-additional-intervals-for-the-date-time-field-time-picker/
 */

function wpf_dev_datetime_time_intervals( $intervals ) {
      
     // Add time interval of 5 minutes
     $intervals[ '5' ] = esc_html__( '5 minutes', 'wpforms' );
     ksort( $intervals );
  
     return $intervals;
}

add_filter( 'wpforms_datetime_time_intervals' , 'wpf_dev_datetime_time_intervals', 10, 1 );

Criar o seu formulário

Em seguida, terá de criar um novo formulário e adicionar um campo Data / Hora a este formulário. Para efeitos deste tutorial, vamos separar a data para ser um campo e a hora para ser um campo separado.

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

Como adicionámos o nosso snippet primeiro, assim que adicionarmos o campo Hora ao nosso formulário e abrirmos as Opções Avançadas, veremos dentro do menu suspenso para Intervalos o novo intervalo que acabámos de adicionar.

Selecione a nova opção e guarde o formulário.

Agora, quando os seus visitantes preencherem o formulário, verão que o seletor de hora mostra blocos a cada 5 minutos.

Gostaria de criar formatos adicionais para o campo Hora também? Dê uma vista de olhos ao nosso artigo sobre Como Criar Formatos Adicionais para o Seletor de Hora do Campo Data Hora.

Filtro de Referência

Referência do Filtro: wpforms_datetime_time_intervals

FAQ

P: Posso adicionar mais do que um intervalo de tempo de cada vez?

R: Absolutamente! Pode criar quantos quiser usando este formato para o seu snippet.

/**
 * Add additional time intervals for the Time field Interval dropdown
 *
 * @link   https://wpforms.com/developers/how-to-create-additional-intervals-for-the-date-time-field-time-picker/
 */
 
function wpf_dev_datetime_time_intervals( $intervals ) {
       
     // Add time interval of 5 minutes
     $intervals[ '5' ] = esc_html__( '5 minutes', 'wpforms' );
	
	 // Add time interval of 2 hours
	 $intervals[ '120' ] = esc_html__( '2 hours', 'wpforms' );
	
     ksort( $intervals );
   
     return $intervals;
}
 
add_filter( 'wpforms_datetime_time_intervals' , 'wpf_dev_datetime_time_intervals', 10, 1 );