Gravity Forms Require Date Picker To Be Future Date


About The Author
Cabe Nolan is the founder of WP Cover where he shares his insight into WordPress, development, & entrepreneurship. Outside of WPCover, Cabe continues to run a successful WordPress development firm, Bold City Design as well as a couple high profile websites, Two Way Resume, Dock Skipper, and a successful outdoors brand, DolfinPack.







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.


Share Your Thoughts

Leave a Reply

Your email address will not be published. Required fields are marked *


Related Stuff You Might Like







WordPress News, Tips, & Code Snippets

Join the WP Cover mailing list and get wordpress news, tips, code snippets, security warnings, and more delivered right to your inbox.  We won't flood your inbox, newsletters typically go out every 1-2 weeks unless it involves an important security release.

You have Successfully Subscribed!