How to Customize the Date Time Field Time Picker

Introduction

Would you like to customize the Date / Time field for the time picker in WPForms? The Time Picker provides the user with a list of times to choose from. These times can be changed so that only a specific time range is available. You can also provide a built-in option on the form builder to limit certain times.

To learn more about setting up a single limit for the time picker, please check out this documentation.

In this tutorial, we’ll show you how to customize the time picker on the Time field to disable multiple times using a small PHP snippet.

Creating your form

First, we’ll create a new form, add our fields, and add a Time form field.

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

For our form, we’re going to use the options on the Advanced tab to Limit Hours to 8am to 5pm for our office opening and closing time.

Adding the snippet

Next, we want to disable the time from 9am to 10am for a daily company-wide meeting but we also want to disable the 12pm to 1pm time slot which is the lunchtime hours as well. In order to do this, we need to add a snippet to our site.

There are three different ways this can be applied:

• All time pickers site-wide
• All time pickers inside a specific form
• A specific time picker inside a specific form.

Choose the code snippet that works for your needs and copy it to your site.

If you need help in how to add snippets to your site, please see this tutorial .

All time pickers site-wide

Below will apply to all time pickers on the site.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        window.wpforms_timepicker = {

			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}

add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

All time pickers inside a specific form

Below will apply to all time pickers inside form ID 879.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        // Change this _879 to match the form ID you have on your own form
        window.wpforms_879 = window.wpforms_879 || {};
        window.wpforms_879.timepicker = {

			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

A specific time picker inside a specific form

Below will apply to the time picker within field ID 8 inside form ID 879.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

    <script type="text/javascript">

        // Change this _879_8 to match the form ID and the field ID you have on your own form
        window.wpforms_879_8 = window.wpforms_879_8 || {};
        window.wpforms_879_8.timepicker = {

            forceRoundTime: true,
			// Disable lunch time and daily meeting time
			disableTimeRanges: [
				[ '9am', '10am' ],
				[ '12pm', '1pm' ]
			]

        };

    </script>

    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

If you need any assistance in identifying the form or field IDs, please review this article.

Your visitors can see the times you’ve disabled with the snippet but they won’t be able to select them.

That’s all you need to customize the time pickerfor the Date / Time field in WPForms. Would you like to create additional formats for your Date Picker? Our tutorial, How to Create Additional Formats for the Date Field will show you how you can use PHP to achieve this.

Related

Action Reference: wpforms_wp_footer

FAQ

Q: Can I also use this filter to change the time intervals?

A: Absolutely! By default, WPForms form builder will give you the option to set your time intervals to 15 minutes, 30 minutes and 1 hour. To change the time intervals to 5 minutes, you would use the following code:

/**
 * Change the time intervals on the time picker
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>
    <script type="text/javascript">

        // Change this _797 to match your own form ID number
        window.wpforms_797 = window.wpforms_797 || {};
        window.wpforms_797.timepicker = {
            
            // Limit times to every 5 minutes
            step: '5'
        };

    </script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );

Just remember to change the window.wpforms_797 and the step: '5' to match your form ID and the time interval you want to use.