Description
The gform/datepicker/pre_init filter can be used to modify the options used to initialize a field’s datepicker before it is rendered.
Usage
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
// do stuff
return data;
} );
Parameters
| Parameter | Type | Description |
|---|---|---|
data | object | The data object passed to the filter. |
data.input | HTMLElement | The input element the datepicker is associated with. Inputs follow the format input_{FORM_ID}_{FIELD_ID}. |
data.options | object | The options for the datepicker. |
Examples
Note: Replace input_{FORM_ID}_{FIELD_ID} with the input IDs for your specific fields.
Weekends only
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
data.options.disableWeekdays = true;
return data;
} );
} );
No weekends
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
data.options.disableWeekends = true;
return data;
} );
} );
Datepicker 1 becomes minDate for datepicker 2
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
if ( data.input.id === 'input_{FORM_ID}_{FIELD_ID}' ) {
data.options.minDate = new Date( document.getElementById( 'input_{FORM_ID}_{FIELD_ID}' ).value );
}
return data;
} );
} );
Datepicker 1 + 1 month becomes minDate for datepicker 2
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
if ( data.input.id === 'input_{FORM_ID}_{FIELD_ID}' ) {
selectedDate = new Date( document.getElementById( 'input_{FORM_ID}_{FIELD_ID}' ).value );
datePlusOneMonth = new Date( selectedDate.getFullYear(), selectedDate.getMonth() + 1, selectedDate.getDate() );
data.options.minDate = datePlusOneMonth;
}
return data;
} );
} );
Disable specific dates
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
// Skip if not the datepicker we want to configure. Inputs are in the format of input_{FORM_ID}_{FIELD_ID}.
if ( data.input.id !== 'input_{FORM_ID}_{FIELD_ID}' ) {
return data;
}
data.options.configure = function( dc ) {
const disabledDates = [ '2026/04/14', '2026/04/23', '2026/04/29', '2026/06/10', '2026/06/11' ];
for ( const dateStr of disabledDates ) {
const disabledDate = new Date( dateStr );
const y = disabledDate.getFullYear();
const monthIndex = disabledDate.getMonth();
const day = disabledDate.getDate();
if ( ! dc.range[ monthIndex ].disabled[ y ] ) {
dc.range[ monthIndex ].disabled[ y ] = [];
}
dc.range[ monthIndex ].disabled[ y ].push( day );
}
};
return data;
} );
} );
Restrict selectable dates to specific ranges
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
// Skip if not the datepicker we want to configure. Inputs are in the format of input_{FORM_ID}_{FIELD_ID}.
if ( data.input.id !== 'input_{FORM_ID}_{FIELD_ID}' ) {
return data;
}
data.options.configure = function( dc ) {
const disabledRanges = [
{ start: '2026/04/10', end: '2026/04/25' },
{ start: '2026/06/01', end: '2026/06/12' },
];
const isInRange = function( year, month, day, ranges ) {
const date = new Date( year, month, day );
for ( const range of ranges ) {
const start = new Date( range.start );
const end = new Date( range.end );
if ( date >= start && date <= end ) {
return true;
}
}
return false;
};
const viewMonth = dc.range.current.month;
const viewYear = dc.range.current.year;
const disabled = [];
const lastDay = new Date( viewYear, viewMonth + 1, 0 ).getDate();
for ( let day = 1; day <= lastDay; day++ ) {
if ( isInRange( viewYear, viewMonth, day, disabledRanges ) ) {
disabled.push( day );
}
}
if ( ! dc.range[ viewMonth ].disabled ) {
dc.range[ viewMonth ].disabled = {};
}
dc.range[ viewMonth ].disabled[ viewYear ] = disabled;
};
return data;
} );
} );
Disable specific dates and a certain day of the week
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
// Skip if not the datepicker we want to configure. Inputs are in the format of input_{FORM_ID}_{FIELD_ID}.
if ( data.input.id !== 'input_{FORM_ID}_{FIELD_ID}' ) {
return data;
}
data.options.configure = function( dc ) {
dc.range.disabledWDays = [ 0, 6 ]; // 0 is Sunday, 6 is Saturday
const disabledDates = [ '2026/04/14', '2026/04/23', '2026/04/29', '2026/06/10', '2026/06/11' ];
for ( const dateStr of disabledDates ) {
const disabledDate = new Date( dateStr );
const y = disabledDate.getFullYear();
const monthIndex = disabledDate.getMonth();
const day = disabledDate.getDate();
if ( ! dc.range[ monthIndex ].disabled[ y ] ) {
dc.range[ monthIndex ].disabled[ y ] = [];
}
dc.range[ monthIndex ].disabled[ y ].push( day );
}
};
return data;
} );
} );
Setting local translations
The datepicker automatically uses the site language and displays translated strings, provided they have been translated. No additional configuration is needed.
Disable past dates
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
// Skip if not the datepicker we want to configure. Inputs are in the format of input_{FORM_ID}_{FIELD_ID}.
if ( data.input.id !== 'input_{FORM_ID}_{FIELD_ID}' ) {
return data;
}
data.options.minDate = 0;
return data;
} );
} );
Disable month and year selection
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
// Skip if not the datepicker we want to configure. Inputs are in the format of input_{FORM_ID}_{FIELD_ID}.
if ( data.input.id !== 'input_{FORM_ID}_{FIELD_ID}' ) {
return data;
}
data.options.monthSelect = false;
data.options.yearSelect = false;
return data;
} );
} );
Disable specific months
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
// Skip if not the datepicker we want to configure. Inputs are in the format of input_{FORM_ID}_{FIELD_ID}.
if ( data.input.id !== 'input_{FORM_ID}_{FIELD_ID}' ) {
return data;
}
data.options.monthSelect = false;
data.options.yearSelect = false;
// Month numbers 1-12 (Jan = 1, Dec = 12).
const fullyDisabledMonths = [ 1, 2 ];
data.options.configure = function( dc ) {
const viewMonth = dc.range.current.month;
if ( ! fullyDisabledMonths.includes( viewMonth + 1 ) ) {
return;
}
const disabled = [];
for ( let d = 1; d <= dc.range[ viewMonth ].max; d++ ) {
disabled.push( d );
}
dc.range[ viewMonth ].disabled[ dc.range.current.year ] = disabled;
};
return data;
} );
} );
Force the week to start on Monday
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
data.options.wdOffset = 1; // 0 is Sunday, 6 is Saturday
return data;
} );
} );
Allow selection for other months’ days
This is not supported by the datepicker.
Hide dates in other months
The datepicker displays only days from the current month by default. No additional configuration is needed.
Disable specific days of the week
document.addEventListener( 'gform/post_render', function( event ) {
gform.utils.addFilter( 'gform/datepicker/pre_init', function( data ) {
// Skip if not the datepicker we want to configure. Inputs are in the format of input_{FORM_ID}_{FIELD_ID}.
if ( data.input.id !== 'input_{FORM_ID}_{FIELD_ID}' ) {
return data;
}
data.options.configure = function( dc ) {
dc.range.disabledWDays = [ 0, 6 ]; // 0 is Sunday, 6 is Saturday
};
return data;
} );
} );
Placement
Reference the article Adding JavaScript Code to the Frontend of Your Site.
Source Code
This filter is located in assets/js/src/common/datepicker/index.js.
Since
This filter was added in Gravity Forms 3.0.