How to Create Additional Intervals for the Date Time Field 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.

default available time intervals time picker

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

The variable $intervals[ '5' ] will contain the minutes. If you wanted to create 4-hour block, for example, you’d change the 5 to 240.

Creating your form

First, 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.

additional intervals for time picker are now available once thee snippet is added

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

now you can see the new time picker field has the additional time intervals shown correctly in the dropdown

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.

Filter Reference: wpforms_datetime_time_intervals