How to Disable Past Times On the Time Picker

Introduction

Would you like to disable past times from your Time field with WPForms? On your form, you may want to disable any times that have already passed for the day and in this tutorial, we’re going to show you exactly how you can do this with JavaScript.

Creating your form

First, we’ll start by creating our form and adding our fields which will include at least one Time field.

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

Once you’ve added the Time field, click on the Advanced tab and set your Interval. For this demo, we’ve set our to 15 minutes.

Adding the snippet

In order to automatically disable past times, we’ll need to add a snippet to our site.

If you need any help with how to add snippets to your site, please review this tutorial.

/**
 * Disable past times from the time field
 *
 * @link   https://wpforms.com/how-to-disable-past-times-on-the-time-picker/
 */

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

      // Find out the current time
      var now = new Date();

      // Take that current time and round it up so we have an even number on the interval
      now.setHours( now.getHours() + Math.round(now.getMinutes()/90) );
	   
      window.wpforms_999_8 = window.wpforms_999_8 || {};
      window.wpforms_999_8.timepicker = {
         forceRoundTime: true,

         // Disable any times that have passed already and return the new time selections
         minTime: now.toLocaleTimeString()
	  };


   </script>
   <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_cond_time', 10 );

The snippet will look for the form ID of 999 and it will only be applied to the field ID 8 and not only disable the times that have passed for today already but will also round up as well so you don’t get time selections like 9:37 showing up as an option.

You’ll need to update each instance of window.wpforms_999_8 to match your own form and field IDs. If you need help in finding what those IDs are, please check out this tutorial.

And that’s all you need to disable past times! Would you like to also create your own Intervals for the Time field? Check out our tutorial on How to Create Additional Intervals for the Date Time Field Time Picker.

Related

Action Reference: wpforms_wp_footer_end