Restrict Gravity Forms Datepicker Date Ranges

The gravity forms datepicker doesn’t have any built-in options to customize the date ranges that users can pick from. This can result in the possibility for invalid dates being chosen and also makes for a more difficult user experience. Fortunately, we can restrict the gravity forms datepicker date ranges with some simple javascript code. It’s not a paste-and-go solution, but you’ll be all set to go with minimal customization needed.

Setting the Gravity Forms Datepicker Date Range

Step 1: Add the Javascript

You can start by adding the following javascript snippet to your site javascript file. This would ideally be loaded in the footer as it doesn’t need to be done loaded in the header.

Step 2: Add the Form and Field Ids

In the above code you will just need to replace the ‘formId’ and ‘fieldId’ values with the values of your specific form and datepicker field. You can find these values by inspecting the datepicker element in your browser. The example code in the below image shows the datepicker field element highlighted in blue. From this you can look at the ‘id’ field: id=”input_37_8″. The first number is the ‘formId’ and the second number is the ‘fieldId’.

Gravity Forms Datepicker HTML

Step 3: Set your Time Ranges

Setting the time ranges is done by altering the values for the ‘minDate’ and ‘maxDate’. The example above is setting it so that the maximum value you can select in the past is 20 years ago and the most recent would be the current day. This is one example that is only allowing the selection of values in the past up to 20 years ago, but we can change to only allow values 20 years in the future by changing the ‘minDate’ to ‘0’ and the ‘maxDate’ to ‘+20 Y’.

You are not limited to strictly year ranges either. You can limit by months, weeks, or even days depending on your needs with the form’s purpose.
Y = Years (ex: +20 Y)
M = Months (ex: +20 M)
W = Weeks (ex: +20 W)
no label = Days (ex: +20)

Other Notes

It is also worth noting that you don’t need to set both a ‘minDate’ and ‘maxDate’. You can use either one of them alone or both at once depending on your needs. You can also mix the date variables between the min and max value. So you could set it to have a minimum date of 20 years ago and a maximum date of 10 weeks from now. That would be done like this:
optionsObj.minDate = ‘-20 Y’;
optionsObj.maxDate = ‘+10 W’;

If you have multiple forms/fields that you need to restrict the gravity forms datepicker ranges on, then you can just add in more “if” statements right below the one in the example with the new ‘formId’ and ‘fieldId’ values and new custom ranges. The options are there, you just need to make it suit your needs. Feel free to play around with the values as you make your datepicker a better user experience.

Comments

  1. Is there a way to add a time requirement to this code? Meaning, at 3pm est today you need the next day to grey out. Is that possible? If so, what would be the code for it?

    • There aren’t any time specific options built in, but we could use an “if” statement to accomplish this in a certain way.

      I think you could do something like this:

      if (date('H') >= 15) {
          optionsObj.maxDate = '0';
      } else {
          optionsObj.maxDate = '+1';
      }

      I’m not sure if you wanted the next day to grey out for the minDate or maxDate or what it is changing from, so you can adjust this as needed. The 15 is the equivalent of 3PM in military time.

Speak Your Mind

*