gform_datepicker_options_pre_init

gform_datepicker_options_pre_init

DescriptionUsageParametersExamples1. Weekends only2. No Weekends3. Datepicker 1 becomes minDate for datepicker 24. Datepicker 1 + 1 month becomes minDate for datepicker 25. Disable specific dates6. Restrict selectable dates to specific ranges7. Disable specific dates and a certain day of the week8. Setting local translations9. Disable past dates10. Disable month and year selection11. Disable specific months12. Force week to start on MondayPlacementSource Code

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

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[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. See the Translating The Datepicker article. 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; }); 11. Disable specific months The following example will disable date selection for months January, April, and July in a datepicker field with id 1 in a form with id 1744. gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) { if ( formId == 1744 && fieldId == 1 ) { // Months to disable (0 for January, 1 February, etc...) monthsDisabled = [0, 3, 6]; optionsObj.beforeShowDay = function(date) { if (jQuery.inArray(date.getMonth(), monthsDisabled) > -1) {
return [false, ''];
}
return [true, ''];
};
}
return optionsObj;
});

12. Force week to start on Monday
The following example uses the firstDay parameter to force the week to start on Monday.
gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
// Sunday is 0, Monday is 1, etc.
optionsObj.firstDay = 1;
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