Gravity Forms: advanced use of Datepicker

If you want to use Gravity Forms’ Datepicker in an advanced way, you’re going to have to quickly use Javascript code. A good solution is to use the free Code Chest plugin from Gravity Wiz.

In all examples :
– Form ID: 3
– ID of the ‘start date’ datepicker field: 110
– ID of the ‘end date’ datepicker field: 111
– Date fields are in FR format (‘dd.mm.yyyy’ i.e. ‘27.12.2025’)

Here are a few examples:

1. Basic example

The start date must be greater than or equal to the current date. The end date must be greater than the start date; by default, it must correspond to the start date + 1 day.

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 3 && (fieldId == 110 || fieldId == 111) ) {
        optionsObj.minDate = 0;
        optionsObj.dateFormat = 'dd.mm.yy';
        optionsObj.onClose = function (dateText, inst) {
            var dateArray = dateText.split('.');
            var day = parseInt(dateArray[0], 10);
            var month = parseInt(dateArray[1], 10) - 1;
            var year = parseInt(dateArray[2], 10);
            var dateSelected = new Date(year, month, day);
            var dateMin = new Date(dateSelected.getTime() + (24 * 60 * 60 * 1000));
            jQuery('#input_3_111').datepicker('option', 'minDate', dateMin).datepicker('setDate', dateMin);
        };
    }
    return optionsObj;
});

2. Advanced example

Same as above, but it is not possible to select Sunday as the start date:

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 3 && (fieldId == 110 || fieldId == 111) ) {
        optionsObj.minDate = 0;
        optionsObj.dateFormat = 'dd.mm.yy';
        optionsObj.onClose = function (dateText, inst) {
            var dateArray = dateText.split('.');
            var day = parseInt(dateArray[0], 10);
            var month = parseInt(dateArray[1], 10) - 1;
            var year = parseInt(dateArray[2], 10);
            var dateSelected = new Date(year, month, day);
            var dateMin = new Date(dateSelected.getTime() + (24 * 60 * 60 * 1000));
            jQuery('#input_3_111').datepicker('option', 'minDate', dateMin).datepicker('setDate', dateMin);
        };
    }
    if ( formId == 3 && (fieldId == 110 ) ) {
        optionsObj.firstDay = 1;
        optionsObj.beforeShowDay = function(date) {
            var day = date.getDay();
            return [(day == 1 || day == 2 || day == 3 || day == 4 || day == 5 || day == 6)];
        };
	}	
	return optionsObj;
});

3. More advanced example

We added 2 conditions :

– The datepicker allows you to select dates between 24.6.2024 and 28.6.2024

– The end date must be between 1 and 3 days after the start date

To make your life easier, all the configuration is done at the start of the script using variables.

Are you ready for a 66 lines-code-script ?

gform.addFilter('gform_datepicker_options_pre_init', function(optionsObj, formId, fieldId) {

// START config
var formID = 3;
var fieldStartID = 110;
var fieldEndID = 111;
optionsObj.dateFormat = 'dd.mm.yy';
var startDate = new Date(2024, 5, 24); // 24.06.2024
var endDate = new Date(2024, 5, 28); // 28.06.2024
var minDelay = 1;
var maxDelay = 3;
// END config

	if (formId == formID && (fieldId == fieldStartID || fieldId == fieldEndID)) {
		if (fieldId == fieldStartID) {
			optionsObj.minDate = startDate;
			endDate.setDate(endDate.getDate() - minDelay);
			optionsObj.maxDate = endDate;
		} else if (fieldId == fieldEndID) {
			startDate.setDate(startDate.getDate() + minDelay);
			optionsObj.minDate = startDate;
			optionsObj.maxDate = endDate;
		}
		optionsObj.onClose = function(dateText, inst) {
			var startDate = jQuery('#input_'+formID+'_'+fieldStartID).datepicker('getDate');
			var endDate = jQuery('#input_'+formID+'_'+fieldEndID).datepicker('getDate');

			if (fieldId == fieldStartID && !endDate) {
				if (!endDate || startDate > endDate) {
					var defaultEndDate = new Date(startDate);
					defaultEndDate.setDate(startDate.getDate() + minDelay);
					jQuery('#input_'+formID+'_'+fieldEndID).datepicker('setDate', defaultEndDate);
				}
			} else if (fieldId == fieldStartID && endDate) {
				if (startDate > endDate) {
					jQuery('#input_'+formID+'_'+fieldEndID).datepicker('setDate', null);
				} else {
					var maxEndDate = new Date(startDate);
					maxEndDate.setDate(maxEndDate.getDate() + maxDelay);

					var lastDate = endDate;
					
					if (endDate > lastDate) {
						jQuery('#input_'+formID+'_'+fieldEndID).datepicker('setDate', lastDate);
					} else if (maxEndDate < endDate) {
						jQuery('#input_'+formID+'_'+fieldEndID).datepicker('setDate', maxEndDate);
					}
				}
			} else if (fieldId == fieldEndID && startDate) {
				if (endDate < startDate) {
					jQuery('#input_'+formID+'_'+fieldStartID).datepicker('setDate', endDate);
				} else {
					var minStartDate = new Date(endDate);
					minStartDate.setDate(minStartDate.getDate() - maxDelay);
					var firstDate = startDate;
					if (startDate < firstDate) {
						jQuery('#input_'+formID+'_'+fieldStartID).datepicker('setDate', firstDate);
					} else if (minStartDate > startDate) {
						jQuery('#input_'+formID+'_'+fieldStartID).datepicker('setDate', minStartDate);
					}
				}
			}
		};
	}
	return optionsObj;
});

To manage conditions easily and without code, you can use the Gravity Wiz plugin, which offers plenty of advanced features for Gravity Forms.