How to link Date fields with Gravity Forms
A simple method for linking two Date fields; the date selected in the first field becomes the minimum date selectable in the second.
This article requires the GP Limit Dates perk.
Buy Gravity Perks to get this perk plus 46 other premium Gravity Forms plugins!
Steps
- Install GP Limit Dates.
- Add two Date fields to your form.
- Set “Minimum Date” on second Date field.
- (optional) Configure “Maximum Date” on first Date field.
1. Install GP Limit Dates (via Gravity Perks)
GP Limit Dates is available via Gravity Perks. Install Gravity Perks and then you can install GP Limit Dates (and 46 other Gravity Forms plugins) right from your WordPress admin.
2. Add two Date fields to your form.
Under the Advanced Fields field group, click the “Date” field button to add a Date field. After the first has been added, click the button again to add a second.
You should now have two Date fields on your form. I’ve named mine “Start Date” and “End Date”.
3. Set “Minimum Date” on second Date field.
Click on the second Date field to open the field settings. Navigate to the “Perks” tab.
Set the “Minimum Date” setting to the “Start Field”.
That’s it! Whenever a date is selected in the Start Date field, the minimum date in the End Date field will be adjusted based on the selected date.
Modifying the Minimum Date
In some cases, you may want to enforce a minimum range between the start and end dates. You can use the “Date Modifier” input (next to the “Minimum Date” select) to modify the selected date before it is set as the minimum date.
For example, if you would like to enforce a two-night stay at your hotel, you could increase the selected date by +2 days. This means if the first date selected was Jan 13, 2015 the minimum date in the second field would be Jan 15, 2015.
For more information on modifying dates, read the GP Limit Dates documentation.
4. (optional) Configure “Maximum Date” on first Date field.
If you’d like, you can take this a step further and set the “Maximum Date” on the first Date field to the selected date from the second Date field. This can help a user fully understand the connection between the two Date fields.
Hi. I was wondering is it possible to show a date range only as a reference and not restrict users from selecting outside this date range? How would it work?
Hi Will,
From what I understand there is no ready solution for this use case. We’ll be happy to investigate this if you get in touch with us via our Support Form.
Best,
Hi, this doesn’t seem to work with the latest GF version. Am I missing something?
Looks like i used +1 instead of “+1 day”. Now it works.
Hi David, We are trying to disallow weekends (that part is easy) and make them pick any date in the future. We are just selecting a single day for an appointment, not a date range.
How can I get this to work? They just don’t want people to be able to select today as they can’t fulfill that request.
Hi Bradley,
To prevent people from selecting the current date, set the Minimum Date property to “Current Date + 1 day”. The setup will be similar to the screenshot here..
In case you’re unable to set it up, you can get in touch with us via our support form so we can assist you further.
Best,
Hi, is it possible to limit the starting date to -7 days? At the moment negative values don’t work. Thanks!
Hey Richard, they should work… could you drop us a support request for this? We’ll be happy to dig in.
Hello. I’ve got a form with start date and end date. I’d like to use “exceptions” as no-services days : theses dates can’t be used as start or end dates. Is it possible to share exceptions between the two calendars ? Thanks !
Not without custom code. This isn’t an example of exactly what you’re trying to do but it’s a start: https://gist.github.com/spivurno/22cde09a3eabfc3a76c0b8fa5f6996d4 If you need more help, ping us via support. :)
Hi, is it possible to limit the date by the value of a dropdown field, like in this example? https://picload.org/image/rowooddl/gravityperks.jpg
Hi Timo, this is not currently supported. I’ve added this to the feature requests for this perk. If you’d like to commission the feature, we’d love to talk about it. :)
Hi
I have a product (skip hire) where the user has to selects two dates: delivery and then collection. With this add-on, is it possible to limit the second date picker (collection date) to a maximum of 2 weeks after the date selected in the first date field (delivery date)?
Hope that makes sense. Many thanks in advance.
Hi David, yes, this is supported by GP Limit Dates. :)
Great – thank you!