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 47 other premium Gravity Forms plugins!

View Plugin Buy Gravity Perks

Steps

  1. Install GP Limit Dates.
  2. Add two Date fields to your form.
  3. Set “Minimum Date” on second Date field.
  4. (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 47 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.

gp-limit-dates-add-date-field

You should now have two Date fields on your form. I’ve named mine “Start Date” and “End Date”.

how-to-restrict-dates-two-date-fields

3. Set “Minimum Date” on second Date field.

Click on the second Date field to open the field settings. Navigate to the “Perks” tab.

how-to-restrict-dates-end-date-settings-clean

Set the “Minimum Date” setting to the “Start Field”.

how-to-restrict-dates-minimum-date

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.

how-to-restrict-dates-maximum-date

Comments

  1. will
    will April 13, 2022 at 7:27 pm

    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?

    Reply
    1. Dario Space
      Dario Space Staff April 13, 2022 at 7:32 pm

      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,

  2. Bradley Murray
    Bradley Murray December 8, 2020 at 8:50 pm

    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.

    Reply
    1. Samuel Bassah
      Samuel Bassah Staff December 9, 2020 at 8:04 am

      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,

  3. Fred Mastellari
    Fred Mastellari March 28, 2018 at 9:34 am

    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 !

    Reply
    1. David Smith
      David Smith Staff February 16, 2017 at 10:35 pm

      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. :)

  4. David
    David November 11, 2016 at 4:59 am

    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.

    Reply

Leave a Reply

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

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Grab a bundle of free Gravity Forms plugins

Enter your email and receive our most popular free plugins and snippets, plus access to hundreds of others.

This field is for validation purposes and should be left unchanged.