Gravity Forms Require Date Picker To Be Future Date

A couple times over the last month I’ve been asked the same question regarding Gravity Forms, “How can I require the user using the date picker to select a future date?”

Very good question and something I was surprised I had not stumbled upon before.  The current client was creating a booking platform and wanted to ensure the user submitting the form selected a day in the future so they had time to prepare the lesson and have instructors available.

Luckily, it was pretty straight-forward.  Gravity Forms utilizes the jQuery datepicker which can be seen here in all it’s glory: https://jqueryui.com/datepicker/

In order to modify the default functionality, we simply needed to find the ID of the field in question and target it using some jQuery.  My first attempt looked something like this:

jQuery(document).ready(function($) {
	jQuery( "#input_5_4" ).datepicker({ defaultDate: '+1d', minDate: '+1d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true});
});

All good? Not so fast. Once implementing I realized my form would not submit due to validation errors. What was wrong? The jQuery datepicker format! The datepicker was returning a different format of the address versus what Gravity Forms was expecting. Therefore, an extra option added to the jQuery did the trick in correctly formatting:

jQuery(document).ready(function($) {
	jQuery( "#input_5_4" ).datepicker({ defaultDate: '+1d', minDate: '+1d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, dateFormat: 'mm/dd/yy' });
});

That did it! With the code above, the user could only select a datepicker value in the future (a day after the current date) and it would return the correct format (mm/dd/yy) that Gravity Forms was expecting.

The post Gravity Forms Require Date Picker To Be Future Date appeared first on WP Cover.