Como Criar Intervalos de Tempo Adicionais para o Seletor de Hora

Would you like to customize the time intervals available in the Date/Time field’s Time picker? By default, the Time Picker offers intervals set at 15 minutes, 30 minutes, and 1 hour.

However, if you require more specific time increments, you can easily create additional intervals to better suit your needs. In this tutorial, we’ll show you how!

Adding additional time intervals

We’re going to begin by adding the code snippet that will create additional time intervals in our form builder. To do this you’ll need to copy and paste this code snippet to your 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 );

Criando seu formulário

Next, you’ll need to create a new form and add a Date / Time field to this form. For the purpose of this tutorial, we’re going to separate the date to be one field and the time to be a separate field.

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

Because we added our snippet first, once we’ve added the Time field to our form and open the Advanced Options, we’ll see inside the dropdown for Intervals the new interval we just added.

Select the new option and save the form.

Now when your visitors complete the form, they will see the time picker shows blocks for every 5 minutes.

Would you like to create additional formats for the Time field as well? Take a look at our article on How to Create Additional Formats for the Date Time Field Time Picker.

Filtro de Referência

Filter Reference: wpforms_datetime_time_intervals

Perguntas Frequentes

Q: Can I add more than one time interval at a time?

A: Absolutely! You can create as many as you’d like using this format for your 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 );