gravity forms

Gravity Forms: How to Restrict a DatePicker Date Range and Datepicker 1 becomes minDate for datepicker 2

 in JavaScript / WordPress  tagged date picker / gravity forms by

Create an html block in your form and add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 10 && (fieldId == 30 || fieldId == 32) ) {
        var ranges = [
            { start: new Date('10/01/2021'), end: new Date('10/11/2021') }
        ];
        optionsObj.beforeShowDay = function(date) {
            for ( var i=0; i<ranges.length; i++ ) {
                if ( date >= ranges[i].start && date <= ranges[i].end ) return [true, ''];
            }
            return [false, ''];
        };
        optionsObj.minDate = ranges[0].start;
        optionsObj.maxDate = ranges[ranges.length -1].end;
    }
    if ( formId == 10 && fieldId == 30 ) {
        optionsObj.onClose = function (dateText, inst) {
            jQuery('#input_10_32').datepicker('option', 'minDate', dateText).datepicker('setDate', dateText);
        };
    }
    return optionsObj;
});
</script>

Be sure to change the dates, the form ID and field ID for the two fields.