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.

<script type="text/javascript">
jQuery(document).ready(function($) {

    //customize calendar start date/limits
    gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
        if ( formId == 37 && fieldId == 8 ) {
            optionsObj.minDate = '-20 Y';
            optionsObj.maxDate = 0;
        }
    return optionsObj;
    });
</script>

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’.

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.