bookmark_bordergform_datepicker_options_pre_init

Description

This filter can be used to modify the options used to initialize a fields datepicker.

The Gravity Forms Datepicker is powered by the jQuery UI Datepicker which is bundled with WordPress. See jQuery UI API Documentation – Datepicker Widget for all the possible options you can use with this filter.

Usage

<script>
gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    // do stuff

    return optionsObj;
} );
</script>

Parameters

  • optionsObj JavaScript Object

    The current datepicker object.

        {
            yearRange: '-100:+20',
            showOn: 'focus',
            dateFormat: 'mm/dd/yy',
            changeMonth: true,
            changeYear: true,
            suppressDatePicker: false,
            onClose: function () {
                element.focus();
                var self = this;
                this.suppressDatePicker = true;
                setTimeout(function () {
                    self.suppressDatePicker = false;
                }, 200);
            },
            beforeShow: function (input, inst) {
                return !this.suppressDatePicker;
            }
        }
        

  • formId integer

    The ID of the current form.

  • fieldId integer

    The ID of the current field.

Examples

1. Weekends only

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 12 && fieldId == 1 ) {
        optionsObj.firstDay = 1;
        optionsObj.beforeShowDay = function(date) {
            var day = date.getDay();
            return [(day == 0 || day == 6)];
        };
    }
    return optionsObj;
});

2. No Weekends

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 12 && fieldId == 6 ) {
        optionsObj.firstDay = 1;
        optionsObj.beforeShowDay = jQuery.datepicker.noWeekends;
    }
    return optionsObj;
});

3. Datepicker 1 becomes minDate for datepicker 2

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 12 && fieldId == 8 ) {
        optionsObj.minDate = 0;
        optionsObj.onClose = function (dateText, inst) {
             jQuery('#input_12_9').datepicker('option', 'minDate', dateText).datepicker('setDate', dateText);
        };
    }
    return optionsObj;
});

4. Datepicker 1 + 1 month becomes minDate for datepicker 2

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 12 && fieldId == 11 ) {
        optionsObj.minDate = 0;
        optionsObj.onClose = function (dateText, inst) {
            dateText = new Date(dateText);
            dateMin = new Date(dateText.getFullYear(), dateText.getMonth() + 1,dateText.getDate());
            jQuery('#input_12_12').datepicker('option', 'minDate', dateMin).datepicker('setDate', dateMin);
        };
    }
    return optionsObj;
});

5. Disable specific dates

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 12 && fieldId == 14 ) {
        var disabledDays = ['06/15/2014', '07/01/2014', '07/15/2014'];
        optionsObj.beforeShowDay = function(date) {
            var checkdate = jQuery.datepicker.formatDate('mm/dd/yy', date);
            return [disabledDays.indexOf(checkdate) == -1];
        };
    }
    return optionsObj;
});

6. Restrict selectable dates to specific ranges

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 12 && fieldId == 16 ) {
        var ranges = [
            { start: new Date('06/15/2014'), end: new Date('06/25/2014') },
            { start: new Date('07/15/2014'), end: new Date('07/25/2014') },
            { start: new Date('08/15/2014'), end: new Date('08/25/2014') }
        ];
        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;
    }
    return optionsObj;
});

7. Disable specific dates and a certain day of the week

gform.addFilter('gform_datepicker_options_pre_init', function (optionsObj, formId, fieldId) {
    if (formId == 149 && fieldId == 2) {
        optionsObj.firstDay = 1;
        optionsObj.beforeShowDay = function (date) {
            var disabledDays = ['06/15/2015', '06/16/2015', '06/18/2015'],
                currentDate = jQuery.datepicker.formatDate('mm/dd/yy', date),
                day = date.getDay();

            return [!(disabledDays.indexOf(currentDate) != -1 || day == 3)];
        };
    }

    return optionsObj;
});

8. Setting local translations

The below example will set the default region to France, which will include translations.

Note: This assumes that the translation file is already present and enqueued.

gform.addFilter('gform_datepicker_options_pre_init', function (optionsObj, formId, fieldId) {
    if (formId == 149 && fieldId == 2) {
        jQuery.datepicker.regional['fr']
    }

    return optionsObj;
});

9. Disable past dates

The snippet below will disable any past date and allow only to select current and future dates.

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
	// Apply to field 2 only 
	if ( fieldId == 2 ) {
		optionsObj.minDate = 0;
	}
	return optionsObj;
});

10. Disable month and year selection

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 381 && fieldId == 2 ) { // Update form and field id in this line
	optionsObj.changeMonth = false;
	optionsObj.changeYear = false;  
    }
    return optionsObj;
});

Placement

Your code snippet can be placed in a HTML field on your form or in a theme custom JavaScript file.

Source Code

This filter is located in js/datepicker.js