How to Create Additional Time Intervals for the Time Picker

Introduction

Would you like to create additional time intervals for the Date Time Field Time picker? By default, the Interval for the Time Picker is 15 minutes, 30 minutes, and 1 hour.

However, by adding a small code snippet to your site, you can easily create as many different Intervals for your form. In this tutorial, we’ll walk you through the necessary steps to complete this.

Adding the snippet for the 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.

If you need help in adding code snippets to your site, please see this 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 );

Creating your form

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.

If you need help in creating your form, please see this documentation.

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.

Related

Filter Reference: wpforms_datetime_time_intervals

FAQ

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