Gravity Forms is quite possibly the best forms plugin available for WordPress, but even with the vast array of functionality it offers right out of the box it still has its limitations.
One such limitation is the date picker field, offers practically no chance of configuration.
Recently a client asked to have their date picker so it would only select dates in the future, and while Gravity Forms has no way of doing this, fortunately there’s an easy jQuery fix, since Gravity forms uses jQuery standard date picker.
Simply add the following script code to your page/page template before where the form appears, substituting the #input_1_10 part with the form field ID of the datepicker field ID on your form.
<script type=”text/javascript”>
jQuery.noConflict();
jQuery(document).ready(function($) {
$( “#input_1_10” ).datepicker({ minDate: ‘+0d’ });
});
</script>
To set the form to select dates that appear further in the future or perhaps only a week previous, change the +0d (plus zero days) part to something suited to your particular requirements (i.e. +14d to only allow dates two weeks in the future).
Update
Since I wrote this article, Gravity forms has updated their hooks so there are other ways to implement this. Add the following to your theme’s functions.php and it should restrict the date selection and block off future dates. Ensure you change the field ID in the code to match your form field’s ID.
gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
// Apply to field 2 only
if ( fieldId == 2 ) {
optionsObj.minDate = 0;
}
return optionsObj;
});
Is this still working? I could use a simple solution like this but it doesn’t seem to be working with my form, even though I’ve made sure to update “#input_1_10” to the correct field id
It does still work, but can work differently when using different versions of PHP with deprecated date functions. I’ll investigate further.
Thank you Warren, this is exactly what I needed.
I’m am looking to exclude weekends and have users pick ‘+7d’ but the script counts saturday and sunday in the “7”. How can I exclude those and only count M-F?
For this you’ll need to add another function, but it’s easily done. There’s a simple guide here:
https://docs.gravityforms.com/gform_datepicker_options_pre_init/#7-disable-specific-dates-and-a-certain-day-of-the-week
This worked a treat for me.
It’s probably worth adding this in too $(‘input.datepicker’).prop(‘readonly’, true); so no-one can then manually enter a date in the past.
Hi Warren,
thanks for this article – I cannot make this work on my website/
I have a booking form here: ‘https://www.globe-chaser.de/buchung-privatkunden/’ (without the ‘ ‘ )
It is a german website where people can buy an app service for outdoor events. The datepicker input field is 13_69 but I cannot make this run properly – even though I updated your code snippet with 13_69.
I would be happy to get a feedback from you.
Hi Philipp, I’ve updated the article with something that may work better for you, hooking into the Gravity forms actions rather than doing it via Javascript. I hope that helps.
Hi Warren,
This works great in restricting dates to future dates only. The only issue is the calendar formatting is now really hard to read. The alternating rows with a white background has gone transparent and the month and arrows to select a future date are outside the calendar box. Any idea how this can be fixed?
That’s likely a CSS issue with your website. Any good developer should be able to fix the background colours for you. :)
I couldn’t get that code to work by putting it in my functions.php. Here’s what I did to get it to work. In the actual form, I added Javascript to an HTML field as described here –
geektamin.com/blog/590/gravity-forms-how-to-restrict-a-datepicker-date-range.