How to Create Additional Time Intervals for the Time Picker

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.

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.

Reference Filter

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